Does your project need rescued? Nearly 74% of projects do. Click here to view our Guide to get your project on the right path!

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 *