Google Maps

Improve this doc

This plugin uses the native Google Maps SDK Note: As of Ionic native 4.0, this using the 2.0 version of the google maps plugin. Please make sure your plugin is updated

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

• Android
• iOS

Usage

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {
   this.loadMap();
  }

 loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        // Now you can use all methods safely.
        this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      });
  }
}

Static Members

create(element, options)

Creates a new GoogleMap instance

GoogleMap

Instance Members

setDiv(domNode)

Changes the map div

getDiv()

Returns the map HTML element

setMapTypeId(mapTypeId)

Changes the map type id

animateCamera()

Moves the camera with animation

animateCameraZoomIn()

Zooming in the camera with animation

animateCameraZoomOut()

Zooming out the camera with animation

moveCamera()

Moves the camera without animation

moveCameraZoomIn()

Zooming in the camera without animation

moveCameraZoomOut()

Zooming out the camera without animation

getCameraPosition()

Get the position of the camera.

getCameraTarget()

Get the current camera target position

getCameraZoom()

Get the current camera zoom level

getCameraBearing()

Get the current camera bearing

getCameraTilt()

Get the current camera tilt (view angle)

setCameraTarget(latLng)

Set the center position of the camera view

setCameraZoom(zoomLevel)

Set zoom level of the camera

setCameraTilt(tiltLevel)

Set the camera view angle

setCameraBearing(bearing)

Set camera bearing

panBy(x, y)

Change the center of the map by the given distance in pixels

getVisibleRegion()

Get the current visible region (southWest and northEast)

getMyLocation()

Get the current device location

setClickable(isClickable)

Set false to ignore all clicks on the map

remove()

Destroy a map completely

clear()

Remove all overlays, such as marker

fromLatLngToPoint()

Convert the unit from LatLng to the pixels from the left/top of the map div

fromPointToLatLng()

Convert the unit from the pixels from the left/top to the LatLng

setMyLocationEnabled(enabled)

Set true if you want to show the MyLocation control (blue dot)

setMyLocationButtonEnabled(enabled)

Set true if you want to show the MyLocation button

getFocusedBuilding()

Get the currently focused building

setIndoorEnabled(enabled)

Set true if you want to show the indoor map

setTrafficEnabled(enabled)

Set true if you want to show the traffic layer

setCompassEnabled(enabled)

Set true if you want to show the compass button

setAllGesturesEnabled(enabled)

Sets the preference for whether all gestures should be enabled or disabled

setVisible(visible)

Set visibility of the map

setPadding(top, right, left, bottom)

Adjust the map padding (same as CSS padding rule)

setOptions(options)

Set options

addMarker(options)

Adds a marker

addMarkerCluster(options)

Adds a marker cluster

addCircle(options)

Adds a circle

addPolygon(options)

Adds a polygon

addPolyline(options)

Adds a polyline

addTileOverlay(options)

Adds a tile overlay

addGroundOverlay(options)

Adds a ground overlay

addKmlOverlay(options)

Adds a kml overlay

toDataURL(options)

Returns the base64 encoded screen capture of the map.

Circle

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setCenter(latLng)

Change the center position.

getCenter()

Return the current center position

getRadius()

Return the current circle radius.

setRadius(radius)

Change the circle radius.

setFillColor(color)

Change the filling color (inner color).

getFillColor()

Return the current circle filling color (inner color).

setStrokeWidth(strokeWidth)

Change the stroke width.

getStrokeWidth()

Return the current circle stroke width (unit: pixel).

setStrokeColor(strokeColor)

Change the stroke color (outter color).

getStrokeColor()

Return the current circle stroke color (outer color).

setClickable(clickable)

Change clickablity of the circle.

getClickable()

Return true if the circle is clickable.

setZIndex(zIndex)

Change the circle zIndex order.

getZIndex()

Return the current circle zIndex.

remove()

Remove the circle.

getBounds()

Return the latLngBounds (rectangle) that contains the circle.

setVisible(visible)

Set circle visibility

getVisible()

Returns a boolean that indicates whether the circle is visible

Encoding

Static Members

decodePath(encoded, precision?)

Decodes an encoded path string into a sequence of LatLngs.

encodePath(path)

Encodes a sequence of LatLngs into an encoded path string.

Environment

Static Members

getLicenseInfo()

Get the open source software license information for Google Maps SDK for iOS.

setBackgroundColor(color)

Specifies the background color of the app.

Geocoder

Static Members

geocode(request)

Converts position to address and vice versa

GroundOverlay

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setBounds(bounds)

Change the bounds of the GroundOverlay

setBearing(bearing)

Change the bearing of the ground overlay

getBearing()

Return the current bearing value

setImage(image)

Change the image of the ground overlay

setOpacity(opacity)

Change the opacity of the ground overlay from 0.0 to 1.0

getOpacity()

Return the current opacity

setClickable(clickable)

Change clickablity of the ground overlay

getClickable()

Return true if the ground overlay is clickable

setVisible(visible)

Change visibility of the ground overlay

getVisible()

Return true if the ground overlay is visible

setZIndex(index)

Change the ground overlay zIndex order

getZIndex()

Return the current ground overlay zIndex

remove()

Remove the ground overlay

HtmlInfoWindow

Instance Members

setBackgroundColor(color)

Change the backgroundColor

setContent(content, cssOptions?)

Set your HTML contents.

open(marker)

Open the htmlInfoWindow

close()

Close the htmlInfoWindow

Geocoder

Static Members

geocode(request)

Converts position to address and vice versa

LatLng

Instance Members

lat()

lng()

equals()

toString()

toUrlValue()

LatLngBounds

Instance Members

northeast()

southwest()

type()

toString()

Converts to string

toUrlValue(precision)

Returns a string of the form “lat_sw,lng_sw,lat_ne,lng_ne” for this bounds, where “sw” corresponds to the southwest corner of the bounding box, while “ne” corresponds to the northeast corner of that box.

extend(LatLng)

Extends this bounds to contain the given point.

contains(LatLng)

Returns true if the given lat/lng is in this bounds.

getCenter()

Computes the center of this LatLngBounds

Marker

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setPosition(latLng)

Set the marker position.

getPosition()

Return the marker position.

showInfoWindow()

Show the normal infoWindow of the marker.

hideInfoWindow()

Hide the normal infoWindow of the marker.

setAnimation(animation)

Specify the animation either DROP or BOUNCE

setDisableAutoPan(disableAutoPan)

Set true if you do not want to move the map when you click on the marker.

setVisible(visible)

Set false if you want to hide the marker.

isVisible()

Return true if the marker is visible

setTitle(title)

Change title of the normal infoWindow.

getTitle()

Return the title strings.

setSnippet(snippet)

Change snippet of the normal infoWindow.

getSnippet()

Return the snippet strings.

setOpacity(alpha)

Change the marker opacity from 0.0 to 1.0.

getOpacity()

Return the marker opacity.

remove()

Remove the marker.

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.

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.

isInfoWindowShown()

Return true if the infoWindow is shown on the marker

getHashCode()

Return the marker hash code.

setZIndex(y)

Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays.

getZIndex()

Get z-index

setDraggable(draggable)

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

isDraggable()

Return true if the marker drag is enabled.

setFlat(flat)

Set true if you want to be flat marker.

setIcon(icon)

Change icon url and/or size

setRotation(rotation)

Set the marker rotation angle.

getRotation()

Return the marker rotation angle.

MarkerCluster

Instance Members

getId()

Return the ID of instance.

addMarker(marker, skipRedraw?)

Add one marker location

addMarkers(markers)

Add marker locations

remove()

Remove the marker cluster

getMap()

Return the map instance.

Polygon

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setPoints(points)

Change the polygon points.

getPoints()

Return an instance of the BaseArrayClass. You can modify the points.

setHoles(holes)

Change the polygon holes.

getHoles()

Return an instance of the BaseArrayClass. You can modify the holes.

setFillColor(fillColor)

Change the filling color (inner color)

getFillColor()

Return the current polygon filling color (inner color).

setStrokeColor(strokeColor)

Change the stroke color (outer color)

getStrokeColor()

Return the current polygon stroke color (outer color)

setClickable(clickable)

Change clickablity of the polygon

getClickable()

Return true if the polygon is clickable

setVisible(visible)

Change visibility of the polygon

getVisible()

Return true if the polygon is visible

setZIndex(zIndex)

Change the polygon zIndex order.

getZIndex()

Return the current polygon zIndex

remove()

Remove the polygon.

setStrokeWidth()

Change the polygon stroke width

getStrokeWidth()

Return the polygon stroke width

setGeodesic(geodesic)

When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth.

getGeodesic()

Return true if the polygon is geodesic.

Polyline

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setPoints(points)

Change the polyline points.

getPoints()

Return an instance of the BaseArrayClass You can modify the points.

setGeoDesic(geoDesic)

When true, edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth.

getGeodesic()

Return true if the polyline is geodesic

setVisible(visible)

Change visibility of the polyline

getVisible()

Return true if the polyline is visible

setClickable(clickable)

Change clickablity of the polyline

getClickable()

Return true if the polyline is clickable

setStrokeColor(strokeColor)

Change the polyline color

getStrokeColor()

Return the current polyline color

setStrokeWidth(strokeWidth)

Change the polyline stroke width

getStrokeWidth()

Return the current stroke width (unit: pixel).

setZIndex(index)

Change the polyline zIndex order.

getZIndex()

Return the current polyline zIndex

remove()

Remove the polyline

Spherical

Static Members

computeDistanceBetween(locationA, locationB)

Returns the distance, in meters, between two LatLngs.

computeOffset(from, distance, heading)

Returns the LatLng resulting from moving a distance from an origin in the specified heading (expressed in degrees clockwise from north)

computeOffsetOrigin(to, distance, heading)

Returns the location of origin when provided with a LatLng destination, meters travelled and original heading. Headings are expressed in degrees clockwise from North. This function returns null when no solution is available.

computeLength(path)

Returns the length of the given path.

computeArea(path)

Returns the area of a closed path. The computed area uses the same units as the radius.

computeSignedArea(path)

Returns the signed area of a closed path. The signed area may be used to determine the orientation of the path.

computeHeading(from, to)

Returns the heading from one LatLng to another LatLng. Headings are expressed in degrees clockwise from North within the range (-180,180).

interpolate(from, to, fraction)

Returns the LatLng which lies the given fraction of the way between the origin LatLng and the destination LatLng.

KmlOverlay

Instance Members

getDefaultViewport()

Returns the viewport to contains all overlays

getId()

Return the ID of instance.

getMap()

Return the map instance.

setVisible(visible)

Change visibility of the polyline

getVisible()

Return true if the polyline is visible

setClickable(clickable)

Change clickablity of the KmlOverlay

getClickable()

Return true if the KmlOverlay is clickable

remove()

Remove the KmlOverlay

Poly

Static Members

containsLocation(location, path)

Returns true if the speicified location is in the polygon path

isLocationOnEdge(location, path)

Returns true if the speicified location is on the polyline path

TileOverlay

Instance Members

getId()

Return the ID of instance.

getMap()

Return the map instance.

setFadeIn(fadeIn)

Set whether the tiles should fade in.

getFadeIn()

Get whether the tiles should fade in

setZIndex(zIndex)

Set the zIndex of the tile overlay

getZIndex()

Return the zIndex of the tile overlay

setOpacity(opacity)

Set the opacity of the tile overlay

getOpacity()

Return the opacity of the tile overlay

setVisible(visible)

Set false if you want to hide

getVisible()

Return true if the tile overlay is visible

getTileSize()

Get tile size

remove()

Remove the tile overlay

BaseClass

Instance Members

addEventListener(eventName)

Adds an event listener.

addListenerOnce(eventName)

Adds an event listener that works once.

get(key)

Gets a value

set(key, value, noNotify)

Sets a value

bindTo(key, target, targetKey?, noNotify?)

Bind a key to another object

on(key)

Alias of addEventListener

one(key)

Alias of addEventListenerOnce

empty()

Clears all stored values

trigger(eventName, parameters)

Dispatch event.

destroy()

Executes off() and empty()

removeEventListener(eventName, listener)

Remove event listener(s) The removeEventListener() has three usages:

• removeEventListener(“eventName”, listenerFunction); This removes one particular event listener
• removeEventListener(“eventName”); This removes the event listeners that added for the event name.
• removeEventListener(); This removes all listeners.

off(eventName, listener)

Alias of removeEventListener

BaseArrayClass

Instance Members

empty(noNotify?)

Removes all elements from the array.

forEach(fn)

Iterate over each element, calling the provided callback.

forEachAsync(fn)

Iterate over each element, calling the provided callback.

map(fn)

Iterate over each element, then return a new value. Then you can get the results of each callback.

mapAsync(fn, callback)

Iterate over each element, calling the provided callback. Then you can get the results of each callback.

mapSeries(fn, callback)

Same as mapAsync, but keep the execution order

filter(fn)

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

filterAsync(fn, callback)

The filterAsync() method creates a new array with all elements that pass the test implemented by the provided function.

getArray()

Returns a reference to the underlying Array.

getAt(index)

Returns the element at the specified index.

getLength()

Returns the number of the elements.

indexOf(element)

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

reverse()

The reverse() method reverses an array in place.

sort()

The sort() method sorts the elements of an array in place and returns the array.

insertAt(index, element, noNotify?)

Inserts an element at the specified index.

pop(noNotify?)

Removes the last element of the array and returns that element.

push(element, noNotify?)

Adds one element to the end of the array and returns the new length of the array.

removeAt(index, noNotify?)

Removes an element from the specified index.

setAt(index, element, noNotify?)

Sets an element at the specified index.

GoogleMapOptions

CameraPosition

CircleOptions

GeocoderRequest

GeocoderResult

GroundOverlayOptions

ILatLng

MarkerIcon

MarkerOptions

MarkerClusterIcon

MarkerClusterOptions

MyLocation

MyLocationOptions

PolygonOptions

PolylineOptions

TileOverlayOptions

KmlOverlayOptions

VisibleRegion