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.
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
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 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
tsconfig.json:"typeRoots": ["node_modules/@types"],
within the "compilerOptions"- 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:
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.
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.
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:
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.tsWe 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
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.tsOne 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:
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
Last modified 4yr ago