Google Maps is one of the most used features in a mobile application, and my tutorials on Google Maps have consistently been the most popular on the site. My previous video on using Google Maps in Ionic 2 was created a long time ago, and is now outdated.
So, I wanted to put together another video that sets up a bare bones implementation of Google Maps in an Ionic 2 application. If you would like to see more advanced Google Maps tutorials, make sure to check out my other tutorials.
UPDATE: For a more up to date implementation of Google Maps in Ionic, you should check out this new tutorial.
Here’s the video:
Video Notes
- You can use either the JavaScript SDK or the Native SDK through a plugin when setting up Google Maps. In my opinion, the JavaScript SDK should usually be used as it integrates more nicely. See this article for more thoughts on this.
- It is not required that you provide an API key when using Google Maps unless you reach a certain threshold of API requests. In a production application, you should make sure to generate an API key.
- The types for Google Maps can be installed with
npm install @types/google-maps --save - Make sure to set the map container to
100%height and width, otherwise it will not display properly.