Then we have to install the following typing:
npm install @types/googlemaps --save
Install the TypeScript Definition Manager CLI
npm install typings --global
Then use your CLI to navigate into your Ionic 3 project's folder
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
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 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:
And here you can find some handy svg icons you may find useful.
We used Google distance matrix API to get the distance between two points when the user selects nearby places from the list.
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.
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.