@dante1304/nativescript-google-maps

v1.0.42

Published

2 years ago

Upgraded Google Maps plugin version with marker clustering

Downloads

0High
0Medium
0Low

1304dante

NativeScript JavaScript TypeScript iOS Android

@dante1304/google-maps

ns plugin add @dante1304/nativescript-google-maps

Usage

NativeScript plugin for the Google Maps SDK

This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.

Prerequisites

iOS - Cocoapods must be installed.

Android - The latest version of the Google Play Services SDK must be installed.

Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API key.

Configure API Key for Android

Start by copying the necessary template resource files in to the Android app resources folder:

cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res

Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API key you created earlier.

Finally, modify your app/App_Resources/Android/src/main/AndroidManifest.xml file by inserting the following in between your <application> tags:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/nativescript_google_maps_api_key" />

The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a project.ext property, googlePlayServicesVersion, like so:

//   /app/App_Resources/Android/app.gradle

project.ext {
    googlePlayServicesVersion = "+"
}

Configure API Key for iOS

In your app.js, use the following code to add your API key (replace PUT_API_KEY_HERE with the API key you created earlier):

if (application.ios) {
    GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}

If you are using Angular, modify your app.module.ts as follows:

import * as platform from "platform";
declare var GMSServices: any;

....

if (platform.isIOS) {
    GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}

Adding the MapView

Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, then use the <maps:mapView /> tag to create the MapView:

<!-- /app/main-page.xml -->

<Page
    xmlns="http://www.nativescript.org/tns.xsd"
    xmlns:maps="nativescript-google-maps-sdk"
>
    <GridLayout>
        <maps:mapView
            latitude="{{ latitude }}"
            longitude="{{ longitude }}"
            zoom="{{ zoom }}"
            bearing="{{ bearing }}"
            tilt="{{ tilt }}"
            mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
            padding="{{ padding }}"
            mapReady="onMapReady"
            markerSelect="onMarkerSelect"
            markerBeginDragging="onMarkerBeginDragging"
            markerEndDragging="onMarkerEndDragging"
            markerDrag="onMarkerDrag"
            cameraChanged="onCameraChanged"
            cameraMove="onCameraMove"
        />
    </GridLayout>
</Page>

Properties

The following properties are available for adjusting the camera view:

Events

The following events are available:

Native Map Object

The MapView's gMap property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: iOS | Android

UI Settings

You can adjust the map's UI settings after the mapReady event has fired by configuring the following properties on mapView.settings:

Styling

Use gMap.setStyle(style); to set the map's styling (Google Maps Style Reference | Styling Wizard).

Angular

Use this.mapView.setStyle(<MapStyle>JSON.parse(this.styles)); inside of the onMapReady event handler. In this example, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Wizard. The <MapStyle> type was imported from the plugin as { MapStyle }.

Basic Example

//  /app/main-page.js

var mapsModule = require("dante1304/nativescript-google-maps");

function onMapReady(args) {
    var mapView = args.object;

    console.log("Setting a marker...");
    var marker = new mapsModule.Marker();
    marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20);
    marker.title = "Sydney";
    marker.snippet = "Australia";
    marker.userData = { index : 1};
    mapView.addMarker(marker);

    // Disabling zoom gestures
    mapView.settings.zoomGesturesEnabled = false;
}

function onMarkerSelect(args) {
    console.log("Clicked on " +args.marker.title);
}

function onCameraChanged(args) {
    console.log("Camera changed: " + JSON.stringify(args.camera));
}

function onCameraMove(args) {
    console.log("Camera moving: "+JSON.stringify(args.camera));
}

exports.onMapReady = onMapReady;
exports.onMarkerSelect = onMarkerSelect;
exports.onCameraChanged = onCameraChanged;
exports.onCameraMove = onCameraMove;

Usage with Angular

// /app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

// Important - must register MapView plugin in order to use in Angular templates
registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView);

@Component({
    selector: 'map-example-component',
    template: `
    <GridLayout>
        <MapView (mapReady)="onMapReady($event)"></MapView>
    </GridLayout>
    `
})
export class MapExampleComponent {

    @ViewChild("MapView") mapView: ElementRef;

    //Map events
    onMapReady = (event) => {
        console.log("Map Ready");

}

Marker clustering

To setup the marker cluster use MapView's setupMarkerCluster instead of adding markers to map like this:

function onMapReady(args) {
	var mapView = args.object;
	var markers = [];

	for (i = 0; i < 5; i++) {
		var marker = new mapsModule.Marker();
		marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.2);
		marker.title = `Marker ${i + 1}`;
		marker.snippet = `Marker ${i + 1}`;
		marker.userData = { index: i };
		markers.push(marker);
	}

	// The second argument is the minimum number of items that should form a cluster
	mapView.setupMarkerCluster(markers, 2);

	// Disabling zoom gestures
	mapView.settings.zoomGesturesEnabled = false;
}

License

Apache License Version 2.0