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.

 

  1. Create a method to perform the geolocation. This will use the Location stored in $scope.

     
  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.
  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.

Like this post? Share it!