nativescript-uber
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.2 • Public • Published

    NativeScript plugin for Google Maps SDK

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

    NPM version Dependency status

    NPM

    Prerequisites

    iOS - Cocoapods is installed

    Android - Latest Google Play services SDK installed

    Google Maps API Key - Go to 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.

    Installation

    Install the plugin using the NativeScript CLI tooling

    tns plugin add nativescript-uber
    

    Setup Google Maps API

    See demo code included here

    Live Demo here

    Setup Android API Key

    First copy over the template string resource files for Android

    cp -r node_modules/nativescript-uber/platforms/android/res/values app/App_Resources/Android/
    

    Next modify the file at app/App_Resources/Android/values/nativescript_google_maps_api.xml, uncomment nativescript_google_maps_api_key string and replace PUT_API_KEY_HERE with your api key.

    The plugin will default to latest available version of the Android play-services-maps SDK. 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 = "+"
    }
    

    Setup iOS API Key

    In the main script of your app app.js, use the following to add the API key (providing your key in place of PUT_API_KEY_HERE)

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

    If you are using Angular, you need to modify the main.ts as follows:

    import * as platform from "platform";
    declare var GMSServices: any;
    ....
    if (platform.isIOS) { 
      GMSServices.provideAPIKey("PUT_API_KEY_HERE");
    }
    

    Adding the UberView

    Modify your view by adding the namespace xmlns:maps="nativescript-uber" to your page, then using the <maps:mapView /> tag to create the UberView.

     <!-- /app/main-page.xml -->
     <Page 
        xmlns="http://www.nativescript.org/tns.xsd"
        xmlns:maps="nativescript-uber"
        >
      <GridLayout>
        <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}" 
        								zoom="{{ zoom }}" bearing="{{ bearing }}" 
        								tilt="{{ tilt }}" padding="{{ padding }}" mapReady="onMapReady"  
       								markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging"
       								markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag"
       								cameraChanged="onCameraChanged" />
      </GridLayout>
    </Page>
    

    The following properties are available to you for adjusting camera view.

    Property Description
    latitude number
    latitude number
    zoom number
    bearing number
    tilt number
    padding array of numbers reflectig top, bottom, left and right paddings

    The following events are available:

    Event Description
    mapReady Called when Google Map is ready for use
    coordinateTapped Fires when coordinate is clicked on map
    coordinateLongPress Fires when coordinate is "long pressed"
    markerSelect Fires whenever a marker is selected
    shapeSelect Fires whenever a shape (Circle, Polygon, Polyline) is clicked. You must explicity configure shape.clickable = true; on your shapes.
    markerBeginDragging Fires when a marker begins dragging
    markerDrag Fires repeatedly while a marker is being dragged
    markerEndDragging Fires when a marker ends dragging
    markerInfoWindowTapped Fired on tapping Marker Info Window
    cameraChanged Fired on each camera change

    The property gMap gives you access to the raw platform Map Object - see their SDK references for how to use them ( iOS | Android )

    //  /app/main-page.js
    
    var mapsModule = require("nativescript-uber");
    
    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);
    }
    
    function onMarkerSelect(args) {
       console.log("Clicked on " +args.marker.title);
    }
    
    function onCameraChanged(args) {
        console.log("Camera changed: " + JSON.stringify(args.camera)); 
    }
    
    exports.onMapReady = onMapReady;
    exports.onMarkerSelect = onMarkerSelect;
    exports.onCameraChanged = onCameraChanged;
    

    Styling

    Use gMap.setStyle(style); to change the map styling.

    For map styles, see Google Maps Style Reference and the Styling Wizard.

    Using with Angular

    // /app/map-example.component.ts
    
    import {Component, ElementRef, ViewChild} from '@angular/core';
    import {registerElement} from "nativescript-angular/element-registry";
    
    // Important - must register UberView plugin in order to use in Angular templates
    registerElement("UberView", () => require("nativescript-uber").UberView);
    
    @Component({
        selector: 'map-example-component',
        template: `
        <GridLayout>
            <UberView (mapReady)="onMapReady($event)"></UberView>
        </GridLayout>
        `
    })
    export class MapExampleComponent {
    
        @ViewChild("UberView") mapView: ElementRef;
    
        //Map events
        onMapReady = (event) => {
            console.log("Map Ready");
        };
    }
    

    Clustering Support (Issue #57)

    There is a seperate plugin in development thanks to @naderio - see nativescript-google-maps-utils

    Get Help

    Checking with the Nativescript community is your best bet for getting help.

    If you have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot find any information, try asking the question yourself. Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.

    If you need more help than the Q&A format Stack Overflow can provide, try joining the NativeScript community Slack. The Slack chat is a great place to get help troubleshooting problems, as well as connect with other NativeScript developers.

    Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here Issues.

    Install

    npm i nativescript-uber

    DownloadsWeekly Downloads

    4

    Version

    1.5.2

    License

    MIT

    Last publish

    Collaborators

    • yamilquery