In this post we will look at implementing Google maps in an Ionic 2 app. The app I’m building is called Dogwalk. It’s going to display markers on a map where it’s a nice area to walk your dog.
This is a continuation of the Installing Ionic post, so start there if you haven’t already got an app to add the map to.
Adding Google maps API
Open up the src/index.html file and add a script reference to the Google maps API. Read the google docs to get an API key
<script src="http://maps.google.com/maps/api/js"></script>Then open up src/pages/home/home.html and add a div which will contain the map so that the full .html file looks like this:
<ion-header>
<ion-navbar color="secondary">
<ion-title>
Dogwalk
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-content>
<div #mapContainer id="map"></div>
</ion-content>
</ion-content>Editing the home component to show maps
edit src/page/home/home.ts to look like this:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('mapContainer') mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
ionViewWillEnter() {
this.displayGoogleMap();
}
displayGoogleMap() {
let latLng = new google.maps.LatLng(57.8127004, 14.2106225);
let mapOptions = {
center: latLng,
disableDefaultUI: true,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"lightness":20},{"color":"#ececec"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"on"},{"color":"#f0f0ef"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#f0f0ef"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#d4d4d4"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"on"},{"color":"#ececec"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"lightness":21},{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#d4d4d4"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#303030"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi.attraction","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.government","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"featureType":"poi.place_of_worship","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.school","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.school","elementType":"geometry.stroke","stylers":[{"lightness":"-61"},{"gamma":"0.00"},{"visibility":"off"}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#dadada"},{"lightness":17}]}]
}
this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
}
}I got this from Josh Morony. But I changed the ionViewLoaded event to ionViewWillEnter (which i couldn’t get to work, and isn’t documented). I also added a custom style to the map.
If you do not want the style just remove styles from the map options array. Or if you would like another look on your map take a look at Snazzy maps.
Then edit the src/pages/home/home.scss to look like this:
page-home {
.scroll-content {
height: 100%
}
#map {
width: 100%;
height: 100%;
}
}That will get the google map to work.
Ionic2 Google maps - iOS Simulator displaying dogwalk app
Next time we’ll look at how to add markers to your google map.