Check out Ionic Enterprise

Google Maps

Improve this doc

This plugin uses the native Google Maps SDK

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

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova 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"
    $ npm install --save @ionic-native/google-maps
    
  2. Add this plugin to your app's module

Supported platforms

Usage

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

export class MapPage {
 constructor(private googleMaps: GoogleMaps) {}

// Load map only after view is initialized
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: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   }
 );

 // create LatLng object
 let ionic: LatLng = new LatLng(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: MarkerOptions = {
   position: ionic,
   title: 'Ionic'
 };

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

}

Instance Members

isAvailable()

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

Returns: Promise<boolean>

create(element, options)

Creates a new GoogleMap instance

Param Type Details
element string|HTMLElement

Element ID or reference to attach the map to

options any

Options

Returns: GoogleMap

GoogleMap

Instance Members

addEventListener()

Adds an event listener.

Returns: Observable<any>

addListenerOnce()

Adds an event listener that works once.

Returns: Promise<any>

get(key)

Gets a value

Param Type Details
key

set(key, value)

Sets a value

Param Type Details
key
value

on()

Listen to a map event.

Returns: Observable<any>

one()

Listen to a map event only once.

Returns: Promise<any>

empty()

Clears all stored values

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<Marker | any>

addCircle()

Returns: Promise<Circle | any>

addPolygon()

Returns: Promise<Polygon | any>

addPolyline()

Returns: Promise<Polyline | any>

addTileOverlay()

Returns: Promise<TileOverlay | any>

addGroundOverlay()

Returns: Promise<GroundOverlay | any>

addKmlOverlay()

Returns: Promise<KmlOverlay | any>

setDiv()

setVisible()

setOptions()

setBackgroundColor()

setPadding()

clear()

refreshLayout()

fromLatLngToPoint()

Returns: Promise<any>

fromPointToLatLng()

Returns: Promise<LatLng>

toDataURL()

Returns: Promise<any>

remove()

panBy()

Marker

Instance Members

addEventListener()

Adds an event listener.

Returns: Observable<any>

addListenerOnce()

Adds an event listener that works once.

Returns: Promise<any>

get(key)

Gets a value

Param Type Details
key

set(key, value)

Sets a value

Param Type Details
key
value

on()

Listen to a map event.

Returns: Observable<any>

one()

Listen to a map event only once.

Returns: Promise<any>

empty()

Clears all stored values

isVisible()

Return true if the marker is visible

setVisible(visible)

Set false if you want to hide the marker.

Param Type Details
visible

getHashCode()

Return the marker hash code.

Returns: string Marker hash code

remove()

Remove the marker completely.

setOpacity(alpha)

Change the marker opacity.

Param Type Details
alpha number

Opacity

getOpacity()

Return the marker opacity.

Returns: number Opacity

setZIndex()

iOS only, Plugin Version >= 1.3.3 Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays. (You’re able to run this on Android, but it will have no effect)

Returns: number

setIconAnchor(x, y)

Change the info window anchor. This defaults to 50% from the left of the image and at the bottom of the image.

Param Type Details
x number
y number

setInfoWindowAnchor(x, y)

Change the info window anchor. This defaults to 50% from the left of the image and at the top of the image.

Param Type Details
x number
y number

setDraggable(draggable)

Set true if you allows all users to drag the marker.

Param Type Details
draggable boolean

isDraggable()

Return true if the marker drag is enabled.

Returns: boolean

setFlat(flat)

Set true if you want to be flat marker.

Param Type Details
flat boolean

setIcon(icon)

Change icon url and/or size

Param Type Details
icon

setTitle(title)

Change title of the infoWindow.

Param Type Details
title string

getTitle()

Return the title strings.

Returns: string

setSnippet(snippet)

Change snippet of the infoWindow.

Param Type Details
snippet string

getSnippet()

Return the snippet strings.

Returns: string

setRotation(rotation)

Set the marker rotation angle.

Param Type Details
rotation number

getRotation()

Return the marker rotation angle.

Returns: number

showInfoWindow()

Show the infoWindow of the marker.

Returns: number

hideInfoWindow()

Hide the infoWindow of the marker.

Returns: number

setPosition(latLng)

Set the marker position.

Param Type Details
latLng LatLng

getPosition()

Return the marker position.

Returns: Promise<LatLng>

getMap()

Return the map instance.

Returns: GoogleMap

setAnimation(animation)

Specify the animation either DROP or BOUNCE

Param Type Details
animation string

LatLng

Instance Members

lat()

lng()

equals()

toString()

toUrlValue()

Geocoder

Instance Members

geocode(request)

Converts position to address and vice versa

Param Type Details
request GeocoderRequest

Request object with either an address or a position

Returns: Promise<GeocoderResult[]>

AnimateCameraOptions

Param Type Details
target LatLng | Array<Marker> | LatLngBounds (optional)
tilt number (optional)
zoom number (optional)
bearing number (optional)
duration number (optional)

MarkerOptions

Param Type Details
icon any

The icon image url or properties. Also you can specify HTML Color values. Alternatively you can specify the image as Base64

(optional)
title string

The content of the infoWindow.

(optional)
snippet string

The snippet of the infoWindow.

(optional)
position LatLng

The position of the marker.

(optional)
infoWindowAnchor number[]

Specify the anchor of the InfoWindow

(optional)
draggable boolean

Set true if you want to enable to drag the marker. (Default: false) Important! Drag starts after long pressed on the marker.

(optional)
flat boolean

Set true if you want to use a flat marker. (Default: false)

(optional)
rotation number

Set rotation angle. (Default: 0)

(optional)
visible boolean

Set false if you want to hide. (Default: true)

(optional)
styles any

Specify the options for title.

(optional)
animation string

Which animation to play when marker is added to a map.

(optional)
zIndex number

iOS only, Plugin Version >= 1.3.3 Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays. (You're able to run this on Android, but it will have no effect)

(optional)
disableAutoPan boolean

Set to true to disable auto panning when the marker is clicked.

(optional)
markerClick Function

Function to be invoked when the user clicks on the marker

(optional)
infoClick Function

Function to be invoked when the user clicks on the info box

(optional)

MyLocation

Param Type Details
latLng LatLng (optional)
speed number (optional)
time string (optional)
bearing number (optional)

MyLocationOptions

Param Type Details
enableHighAccuracy boolean (optional)

VisibleRegion

Param Type Details
northeast any (optional)
southwest any (optional)

API

Native

General