Ionic Framework is a great framework for building mobile apps using familiar web technologies.  To add Google Maps to your app, you could use an angular plug-in. However, for a simple implementation, it’s easy to simply integrate Google Maps with your app using Google Maps Javascript API v3.

In this example, I will show you how to build a basic map modal that will display the location of a contact from a list.

  1. Include a link to the Google Maps API in your Index.html
  2. In the controller, set up a method to build the map.

    In this method, we’re passing the latitude and longitude of a point, along with the name of the point (to show on the marker), and the name of the div that will hold the map.  naming the div is important if you may place the map in different divs depending on circumstance.
  3. Create a template for the modal (templates/modal/map-modal.html).
  4. In your Controller, wire up the $ionicModal service to open your modal.
    It is important to call the showOnMap function after the map div is available. We’ll use setTimeout to call showOnMap after a delay to allow the DOM to populate.
  5. Now, in the view, wire up a button to display the map.


Putting it all together, click on the location icon, and the modal will show the map, with a marker for your location.




Like this post? Share it!