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.
   

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