@nativescript/google-maps

NativeScript binding for the Google Maps Android & iOS API.

Table of Contents

• 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
  • 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

Prerequisites

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

Installation

npm install @nativescript/google-maps

Config

Android

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>

iOS

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>

Usage

Core

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}}"
/>

Angular

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>

Vue

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

Vue.use(GoogleMaps)

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

/>

MapView API

Properties

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

Events

The following events are available:

Google Map

Instance

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;
}

API

Properties

Functions

Native Map Object

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

Camera Position

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

Controlling the camera

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

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

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

CameraPosition provides multiple methods to create a target CameraUpdate position.

UI Settings

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

Map Type

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;

Map Styles

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" }
    ]
}];

Markers

Adding Markers

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);
}

Marker Options

Removing Markers

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

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

Circle

Adding Circles

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);
}

Circle Options

Removing Circles

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

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

Polygons

Adding Polygons

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);
}

Polygon Options

Removing Polygons

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

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

Polyline

Adding Polylines

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);
}

Polyline Options

Removing Polylines

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

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

Ground Overlays

Adding Ground Overlays

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);
}

GroundOverlay Options

Removing Ground Overlays

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

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

Tile Overlays

Adding Tile Overlays

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);
}

TileOverlay Options

Removing Tile Overlays

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

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

License

Apache License Version 2.0