Google Maps

Add Google Maps and Geolocation to your Ionic App. Learn how we integrated Maps to Ion2FullApp Ionic Template for very different use cases.

Installation

To use Google Maps Javascript SDK we have to add this line in index.html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YOUR_OWN_KEY"></script>

You need to get a key (it’s free) in https://developers.google.com/maps/documentation/javascript/get-api-key

Then we have to install the following typing:

npm install @types/googlemaps --save

Error: Cannot find namespace Google

If you did the above configurations and you are still getting the message: “Cannot find namespace Google” try doing the following:

1. Install the TypeScript Definition Manager CLI

   npm install typings --global

2. Then use your CLI to navigate into your Ionic 3 project's folder

3. Install the google map definition files using the typings CLI typings install dt~google.maps --global

For Windows Users

Some Windows users reported that their fix was to add the following in tsconfig.json:

"typeRoots": ["node_modules/@types"], within the "compilerOptions"

There are two ways to implement Google Maps:

1. Web based - Javascript

2. Native

But what’s the difference between these two options and which one is better?

There are a few points we should consider:

Javascript SDK

This option uses more mobile data, and the experience won’t be as smooth as the native version. As the user views a map in this web based version, data tiles in .png format are loaded in on the fly. This is worse for data consumption and can cause the user to have to wait longer for chunks of the map to load in. To learn more about this option please check out this article.

Native SDKs

This option requires Cordova, so will only run when installed on devices, not through the browser. If you only need to support iOS and Android then this isn’t a problem, but with the rising popularity of progressive web apps you may want to have your app available through the mobile web as well.

Conclusions

Finally, the Native SDK Cordova plugin is an abstraction on top of the individual iOS and Android SDKs, which allows us to interact with the SDKs from our mobile app, but also adds an extra layer where bugs can creep in. There are quite a few known issues with this plugin. When you use the Javascript SDK you are using the code directly from Google, so it is the more stable option.

Scored on those points above, it’d be a tie between the JavaScript SDK and the Native SDK, so the answer to the question of “which one is better?” would be the ever popular: it depends. You’ll have to consider the requirements of your application and make a decision based on that.

Implementation

In this app we decided to use the Javascript SDK because we have an open mind about progressive web apps feature.

In order to interact with this Google Maps library properly from angular we created the following elements:

Directive

We created a directive <google-map> to display the map and define a bridge to the google.maps.Map object. You can find it in src/components/google-map/google-map.ts

Service

We created a service to interact with all google maps API’s we used in the example. You can find it in src/pages/maps/maps.service.ts

• google.maps.places.AutocompleteService

  • Provides places suggestions for the search and autocomplete feature

• google.maps.Geocoder

  • Handles the geocoding. This means getting the location (lat, lng) from a place and vice-versa.

• google.maps.places.PlacesService

  • To search and display nearby places

• google.maps.DirectionsService

  • To get and display directions from point A to point B

• google.maps.DistanceMatrixService

  • To get distances between two or more points

Models

In order to handle all these functionalities clearly in one page we created some angular models to helps us get things tidy and understandable. You can find them in src/pages/maps/maps.model.ts

NgZones

One caveat worth mentioning here is that there are known issues with external libraries interacting with the angular zone. In this particular case the issue is because the google.maps API’s are not patched by Angular's zone. We fixed the issue using angular NgZones in the service when dealing with the Observers used to interact with google maps API’s endpoints.

You can find more information about these issues here:

• https://gist.github.com/endash/1f961830d0c5b744598a
• http://stackoverflow.com/a/38100262/1116959

These are great posts that will help you understand NgZones:

• http://orizens.com/wp/topics/angular-2-ngzone-intro-the-new-scope-apply/
• http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

Icons

We also added some fancy stuff like the custom icons. According to google maps API there are two ways of customizing icons.

• Using images

• Using symbols (svg)

We followed the second option as we think is the best approach. If you want to change the icons symbol you need to find the path of the svg you want and set that value on the icon object. You can find more information here:

• http://lessons.livecode.com/m/33498/l/325452-getting-svg-path-data-for-svg-icon-extension
• https://developers.google.com/maps/documentation/javascript/symbols

And here you can find some handy svg icons you may find useful.

Distance between two points

We used Google distance matrix API to get the distance between two points when the user selects nearby places from the list.

Static Maps

For the static maps used in the contact card page, we used the Google Static Maps API. It’s very easy to use and you will find all the information you need in the previous link.

GEOLOCATION

This plugin provides information about the device's location, such as latitude and longitude. Learn more here.

To install run:

$ ionic plugin add cordova-plugin-geolocation --save
$ npm install --save @ionic-native/geolocation

Learn more about Google Maps, Places, and Geolocation in an Ionic App.