Google Maps

Improve this doc

$ 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"

Repo: https://github.com/mapsplugin/cordova-plugin-googlemaps

This plugin uses the native Google Maps SDK

Usage

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

export class MapPage {
 constructor() {}

// Load map only after view is initialize
ngAfterViewInit() {
 this.loadMap();
}

loadMap() {
 // make sure to create following structure in your view.html file
 // and add a height (for example 100%) to it, else the map won't be visible
 // <ion-content>
 //  <div #map id="map" style="height:100%;"></div>
 // </ion-content>

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map = new GoogleMap(element);

 // listen to MAP_READY event
 map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));

 // create LatLng object
 let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

 // create CameraPosition
 let position: CameraPosition = {
   target: ionic,
   zoom: 18,
   tilt: 30
 };

 // move the map's camera to position
 map.moveCamera(position);

 // create new marker
 let markerOptions: GoogleMapsMarkerOptions = {
   position: ionic,
   title: 'Ionic'
 };

 map.addMarker(markerOptions)
   .then((marker: GoogleMapsMarker) => {
      marker.showInfoWindow();
    });
 }

}

Static Members

isAvailable()

Checks if a map object has been created and is available.

Returns: Promise<boolean>

Instance Members

on()

Listen to a map event.

Returns: Observable<any>

one()

Listen to a map event only once.

Returns: Promise<any>

setDebuggable()

setClickable()

getCameraPosition()

Get the position of the camera.

Returns: Promise<CameraPosition>

getMyLocation()

Get the location of the user.

Returns: Promise<MyLocation>

getVisibleRegion()

Get the visible region.

Returns: Promise<VisibleRegion>

showDialog()

closeDialog()

getLicenseInfo()

setCenter()

setZoom()

setMapTypeId()

setTilt()

animateCamera()

Returns: Promise<any>

moveCamera()

Returns: Promise<any>

setMyLocationEnabled()

setIndoorEnabled()

setTrafficEnabled()

setCompassEnabled()

setAllGesturesEnabled()

addMarker()

Returns: Promise<GoogleMapsMarker | any>

addCircle()

Returns: Promise<GoogleMapsCircle | any>

addPolygon()

Returns: Promise<GoogleMapsPolygon | any>

addPolyline()

Returns: Promise<GoogleMapsPolyline | any>

addTileOverlay()

Returns: Promise<GoogleMapsTileOverlay | any>

addGroundOverlay()

Returns: Promise<GoogleMapsGroundOverlay | any>

addKmlOverlay()

Returns: Promise<GoogleMapsKmlOverlay | any>

setDiv()

setVisible()

setOptions()

setBackgroundColor()

setPadding()

clear()

refreshLayout()

fromLatLngToPoint()

Returns: Promise<any>

fromPointToLatLng()

Returns: Promise<GoogleMapsLatLng>

toDataURL()

Returns: Promise<any>

remove()

panBy()

API

Native

General