0

I'm trying to use this google maps plugin for NativeScript. I have the map displaying not but I don't see anything in the documentation about adding markers with Angular 2. Does anyone know how to add markers to a map with Angular 2 components?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
TheCodeFox
  • 96
  • 10
  • Peace be upon you Try this: https://stackoverflow.com/questions/36443476/wiring-up-google-maps-nativescript-plugin-with-angular-2 – mohamed mhiri May 08 '17 at 10:46

1 Answers1

2

From the readme here: https://github.com/dapriett/nativescript-google-maps-sdk/blob/master/README.md

/app/map-example.component.html

<GridLayout>
    <MapView (mapReady)="onMapReady($event)"></MapView>
</GridLayout>

/app/map-example.component.ts

import {Component, ElementRef, ViewChild} from '@angular/core';
import { MapView, Position, Marker } from 'nativescript-google-maps-sdk';

@Component({
    selector: 'map-example-component',
    templateUrl: 'map-example.component.html'
})
export class MapExampleComponent {
    private mapView: MapView;

    //Map events

    private onMapReady(args): void {
        this.mapView = args.object;

        this.addMarker();
    }

    private addMarker(): void {
         console.log("Setting a marker...");
        var marker = new Marker();
        marker.position = Position.positionFromLatLng(-33.86, 151.20);
        marker.title = "Sydney";
        marker.snippet = "Australia";
        marker.userData = { index : 1};
        this.mapView.addMarker(marker);
    }
}
Shawn
  • 393
  • 1
  • 7
  • I saw that but it doesn't work in an Angular 2 template. This is the vanilla JavaScript way of doing it. Does anyone know the Angular 2 way of doing this? – TheCodeFox May 04 '17 at 20:10
  • This is also the Angular 2 way of doing it. They're very similar. – Shawn May 16 '17 at 16:11