Add Google Maps and Geolocation to your Ionic App. Learn how we integrated Maps to Ion2FullApp Ionic Template for very different use cases.
Then we have to install the following typing:
npm install @types/googlemaps --save
- 1.Install the TypeScript Definition Manager CLInpm 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
"typeRoots": ["node_modules/@types"],within the
But what’s the difference between these two options and which one is better?
There are a few points we should consider:
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.
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.
In order to interact with this Google Maps library properly from angular we created the following elements:
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
We created a service to interact with all google maps API’s we used in the example. You can find it in
- Provides places suggestions for the search and autocomplete feature
- Handles the geocoding. This means getting the location (lat, lng) from a place and vice-versa.
- To search and display nearby places
- To get and display directions from point A to point B
- To get distances between two or more points
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
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:
These are great posts that will help you understand NgZones:
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:
To install run:
$ ionic plugin add cordova-plugin-geolocation --save
$ npm install --save @ionic-native/geolocation