ionic-google-maps-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

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+