Tutorial hero
Lesson icon

Getting Started with Google Maps in Ionic 2

Originally published January 19, 2017 Time 2 mins

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.
Learn to build modern Angular apps with my course