NativeScript binding for the Google Maps Android & iOS API.

• Prerequisites
• Installation
• Config
  • Android
  • iOS
• Usage
  • Core
  • Angular
  • Vue
• API
  • Properties
  • Events
• GoogleMap
  • Instance
  • API
    • Properties
    • Functions
  • Native Map Object
  • Camera Position
    • Controlling the camera
  • Projection
  • UI Settings
  • Map Type
  • Map Styles
• Adding Markers
  • Marker Options
• Removing Markers
• Adding Circles
  • Circle Options
• Removing Circles
• Adding Polygons
  • Polygon Options
• Removing Polygons
• Adding Polylines
  • Polyline Options
• Removing Polylines
• Adding Ground Overlays
  • GroundOverlay Options
• Removing Ground Overlays
• Adding Tile Overlays
  • TileOverlay Options
• Removing Tile Overlays

To use the Google Maps API, you must register your app in the Google API Console and obtain an API key.

npm install @nativescript/google-maps

Modify the AndroidManifest to include the new meta tag along with your API key, the manifest is located in App_Resources/Android/AndroidManifest.xml

<application
  android:name="com.tns.NativeScriptApplication"
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"
  android:theme="@style/AppTheme"
  android:hardwareAccelerated="true">

  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="yourKey"/>
</application>

Modify the Info.plist to include the new meta tag along with your API key, the manifest is located in App_Resources/iOS/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>TNSGoogleMapsAPIKey</key>
    <string>yourKey</string>
  </dict>
</plist>

Important: Ensure you've included xmlns:map="@nativescript/google-maps" on the Page element

<map:MapView
	lat="{{lat}}"
	lng="{{lng}}"
	zoom="{{zoom}}"
	bearing="{{bearing}}"
	tilt="{{tilt}}"
	ready="{{onReady}}"
	mapTap="{{onTap}}"
	mapLongPress="{{onLongPress}}"
	markerTap="{{onMarkerTap}}"
/>

import { GoogleMapsModule } from '@nativescript/google-maps/angular';

@NgModule({
    imports: [
      GoogleMapsModule
    ],
    declarations: [
      AppComponent
    ],
    bootstrap: [AppComponent]
})

<MapView
	(ready)="onReady($event)"
	(mapTap)="onTap($event)"
	(mapLongPress)="onLongPress($event)"
	(markerTap)="onMarkerTap($event)"
>
</MapView>

import Vue from 'nativescript-vue'
import GoogleMaps from '@nativescript/google-maps/vue'

Vue.use(GoogleMaps)

<MapView
	@ready="onReady"
	@mapTap="onTap"
	@mapLongPress="onLongPress"
	@markerTap="onMarkerTap"

/>

The following properties are available for adjusting the camera view on initialization:

The following events are available:

A GoogleMap instance is required from the map view to access many of the mapping features. The GoogleMaps instance is available from the MapViews ready event:

function onReady(event: MapReadyEvent) {
	const map: GoogleMap = event.map;
}

GoogleMap gives you access to the platforms native map objects native | android | ios

consult the appropriate SDK reference on how to use it: iOS | Android

The maps current camera position can be read from the GoogleMaps object cameraPosition.

To programatically update the camera position you can call animateCamera from the GoogleMap object, like so:

import { CameraUpdate } from '@nativescript/google-maps';

googleMap.animateCamera(
	CameraUpdate.fromCoordinates({
			lat: -32.1234,
			lng: 125.1234
		},
		googleMap.cameraPosition.zoom
	)
);

CameraUpdate provides multiple methods to create a target CameraPosition.

A projection is used to translate between on screen location and geographic coordinates on the surface of the Earth.

You can adjust the maps UI settings from the GoogleMap object by configuring the following properties of uiSettings:

The Google Maps API offers five types of maps:

To set the type of a map, adjust the GoogleMap objects mapType. You can pass in one map type from the MapType Enum. For example:

import { GoogleMap, MapType } from '@nativescript/google-map';

...
map: GoogleMap;
map.mapType = MapType.Hybrid;

You can customize the presentation of the standard Google Map styles, changing the visual display of features like roads, parks, businesses, and other points of interest. This means that you can emphasize particular components of the map or make the map look good with your app.

Styling works only on the normal map type. Styling does not affect indoor maps.

To style your map, use a JSON file generated by the Google Maps APIs Styling Wizard. In addition to changing the appearance of features, you can also hide features completely.

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

To apply a custom style to your map you can set the mapStyle property on your GoogleMap object, like so:

import { GoogleMap } from '@nativescript/google-map';

...
map: GoogleMap;
map.mapStyle = [{
	"featureType": "landscape",
	"elementType": "labels",
	"stylers": [
		{ "visibility": "off" }
	]
}];

You can create markers using the GoogleMaps object addMarker function by passing in the specified Marker Options.

function addMarker(map: GoogleMap, markerOptions: MarkerOptions): Marker {
	return map.addMarker(markerOptions);
}

You can remove a marker using the GoogleMaps removeMarker function, like so:

function removeMarker(map: GoogleMap, marker: Marker) {
	map.removeMarker(marker);
}

You can create Circles using the GoogleMaps object addCircle function by passing in the specified Circle Options.

function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
	return map.addCircle(circleOptions);
}

You can remove a Circle using the GoogleMaps removeCircle function, like so:

function removeCircle(map: GoogleMap, circle: Circle) {
	map.removeCircle(circle);
}

You can create polygons using the GoogleMaps object addPolygon function by passing in the specified Polygon Options.

function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
	return map.addPolygon(polygonOptions);
}

You can remove a Polygon using the GoogleMaps removePolygon function, like so:

function removePolygon(map: GoogleMap, polygon: Polygon) {
	map.removePolygon(polygon);
}

You can create Polylines using the GoogleMaps object addPolyline function by passing in the specified Polyline Options.

function addPolyline(map: GoogleMap, polylineOptions: PolylineOptions): Polyline {
	return map.addPolyline(polylineOptions);
}

You can remove a Polyline using the GoogleMaps removePolyline function, like so:

function removePolyline(map: GoogleMap, polyline: Polyline) {
	map.removePolyline(polyline);
}

You can create Ground Overlays using the GoogleMaps object addGroundOverlay function by passing in the specified GroundOverlay Options.

function addGroundOverlay(map: GoogleMap, groundOverlayOptions: GroundOverlayOptions): GroundOverlay {
	return map.addGroundOverlay(groundOverlayOptions);
}

You can remove a GroundOverlay using the GoogleMaps removeGroundOverlay function, like so:

function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
	map.removeGroundOverlay(groundOverlay);
}

You can create Tile Overlays using the GoogleMaps object addTileOverlay function by passing in the specified TileOverlay Options.

function addTileOverlay(map: GoogleMap, tileOverlayOptions: TileOverlayOptions): TileOverlay {
	return map.addTileOverlay(tileOverlayOptions);
}

You can remove a TileOverlay using the GoogleMaps removeTileOverlay function, like so:

function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
	map.removeTileOverlay(tileOverlay);
}

Apache License Version 2.0