Getting Started with Google Maps in Ionic 2

Getting Started with Google Maps in Ionic 2

Follow Josh Morony on

Learn Ionic with Josh ☕

Hey, I hope you enjoy the article.

If you want a weekly update with my newest content, access to the blog's bonus content, or you want to sign up for one of my free beginner or advanced email courses just enter your details here or in the form below.

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.

If you enjoyed this article, feel free to share it with your friends ☝

Check out my latest videos: