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!
Free WordPress Themes, Free Android Games