Basic Geolocation of an Address in Ionic Framework

In my previous post on Integrating Google Maps with the Ionic Framework, I assumed that we had the latitude and longitude to display the map. In this article, we’ll walk through geocoding an address to get these coordinates.

For this example, I will be using a location object that stores data in the following Location object.

{
	'Id':0,
	'Name':'',
	'Address':'',
	'City':''
	'State':'',
	'Zip':'',
	'Country':'',
	'Latitude':'',
	'Longitude':''
}

 

  1. Create a method to perform the geolocation. This will use the Location stored in $scope.
    $scope.lookupLatLng = function () {
                var addr = $scope.Location.Address + ' ' + $scope.Location.City + ', ' + $scope.Location.State + '  ' + $scope.Location.Zip;
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({ address: addr }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
    
                        // Update other address components from results
                        var address_components = results[0].address_components;
                        angular.forEach(address_components, function (address) {
                            if (address.types[0] == 'administrative_area_level_1' && $scope.Location.State != address.short_name) {
                                $scope.Location.State = address.short_name;
                            }
                            if (address.types[0] == 'locality' && $scope.Location.City != address.short_name) {
                                $scope.Location.City = address.short_name;
                            }
                            if (address.types[0] == 'postal_code' && $scope.Location.Zip == "") {
                                $scope.Location.Zip = address.short_name;
                            }
                            if (address.types[0] == 'country' && $scope.Location.Country == "") {
                                $scope.Location.Country = address.short_name;
                            }
                        });
                        $scope.Location.Latitude = lat;
                        $scope.Location.Longitude = lng;
                        $scope.HideMap = false;
                        setTimeout(function () { showOnMap('map', lat, lng, $scope.Location.Name); }, 500);
                    } else {
                        Util.showAlert('Geocode Error', 'Geocode was not successful for the following reason: ' + status);
                    }
                });
            }

     

  2. Call the above method when an Address is updated. In this case, I have wired up a button to fire the geolocation, and I am displaying the Latitude and Longitude for confirmation.In Production, you would likely not want to display the Lat/Longitude.
    <ion-modal-view cache-view="false" class="modal-90">
    	<ion-content>
    		<div class='row'>
    			<div class="col-60">
    				...
    				<div class='row'>
    					...
    					<div class='col-10'>
    						<button class="button button-small icon ion-location button-rounded" ng-click="lookupLatLng()"></button>                        
    					</div>
    				</div>
    			...
    			</div>
    			<div class="col-40">
    				<div ng-if="Location.Latitude && Location.Longitude">
    					<div id="map" data-tap-disabled="true" ng-if="isOnline() && !HideMap"></div>
    				</div>
    				...
    			</div>
    		</div>
    	</ion-content>
    </ion-modal-view>
  3. Test the application, and add/update your address.Click the geolocation button to perform the geolocation and display a map within the view.
    contact-add-addresscontact-add-address-with-map

As you can see, the lookupLatLng() method fills in missing data (Zip, Country) and calls showOnMap to populate the map on the editor modal.

Leave a Reply

Your email address will not be published. Required fields are marked *