Ionic Google Maps Integration

ionic-google-maps-integration-example

This lesson we're going to learn how to work with Google Maps.

Create new project

ionic start GMap blank
cd GMap
ionic serve

Add plugin

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Please check Create API key for android and ios for creating API key

home.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Home
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div id="map" style="height:100%;width:100%">

    </div>
</ion-content>

Explanation: We added map with full width

home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    map: GoogleMap;
    location:any;
    constructor(public navCtrl: NavController, public platform: Platform,) {
    platform.ready().then(()=>{
    this.loadMap(); //load map after platform is ready
    });
    }
    loadMap(){
    this.map = new GoogleMap('map');
    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(()=>{
    this.map.getMyLocation().then( data => { //Get user's current location
    this.location = new GoogleMapsLatLng(data.latLng.lat,data.latLng.lng);
    
    //creating draggable marker
    this.map.addMarker({position: this.location, title:'Current Location'}).then( (marker)=>{
    console.log(marker);
    }, err =>{
    console.log("Add Marker Error =>"+err);
    });
    // Zooming marker
    this.map.moveCamera({
    target:this.location,
    zoom: 12
    });
    });
    });
    }
}

Explanation: we imported GoogleMap from ionic-native ; Since we're using Native SDK for google map, we need to listen to platform ready.once the platform is ready we're loading a map; getMyLocation() used for getting device location; once we got our device location we're displaying a marker with camera zoom level 12