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

Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.