In this post we will look at implementing Google maps in an Ionic 2 app. The app I’m building is called Dogwalk. It’s going to display markers on a map where it’s a nice area to walk your dog.
This is a continuation of the Installing Ionic post, so start there if you haven’t already got an app to add the map to.
Adding Google maps API
Open up the
src/index.html file and add a script reference to the Google maps API. Read the google docs to get an API key
Then open up
src/pages/home/home.html and add a div which will contain the map so that the full .html file looks like this:
Editing the home component to show maps
src/page/home/home.ts to look like this:
I got this from Josh Morony. But I changed the ionViewLoaded event to ionViewWillEnter (which i couldn’t get to work, and isn’t documented). I also added a custom style to the map.
If you do not want the style just remove styles from the map options array. Or if you would like another look on your map take a look at Snazzy maps.
Then edit the
src/pages/home/home.scss to look like this:
That will get the google map to work.
Ionic2 Google maps - iOS Simulator displaying dogwalk app
Next time we’ll look at how to add markers to your google map.