Ionic Google Maps Integration


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



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


Explanation: We added map with full width


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

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

    selector: 'page-home',
    templateUrl: 'home.html'

export class HomePage {
    map: GoogleMap;
    constructor(public navCtrl: NavController, public platform: Platform,) {
    this.loadMap(); //load map after platform is ready
    loadMap(){ = new GoogleMap('map');>{ data => { //Get user's current location
    this.location = new GoogleMapsLatLng(,data.latLng.lng);
    //creating draggable marker{position: this.location, title:'Current Location'}).then( (marker)=>{
    }, err =>{
    console.log("Add Marker Error =>"+err);
    // Zooming marker{
    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