Error with marker's icon

[Dangradz]

When I try to set a Icon image to a new marker I get this error: "Cannot read property android of null..." into google_maps_sdk.js

this is the code

var marker = new mapsModule.Marker(); marker.title=res.description; var icon = new imageModule(); icon.imageSource = imageSource.fromResource('~/images/map/marker/markerFood.png'); marker.icon=icon; marker.position = mapsModule.Position.positionFromLatLng(res.lat,res.lng); map.addMarker(marker);

[ShawnPavel]

Hey @Dangradz I got it to work by using a resource defineded in the app_resources folder.

Just like the images defined here: https://github.com/NativeScript/sample-Groceries/tree/master/app/App_Resources

[Josh-Hicks]

How do you build a marker with Angular 2 and not just javascript?

[ShawnPavel]

I'm not following. You add markers from the JavaScript/Typescript. Are you saying that you want to make the marker in the html markup?

[Josh-Hicks]

I'm saying that if you put the code above in an Angular 2 component file it doesn't work. Or at least I can't get it to work as it's currently written. I assumed there would be another more angular 2 way of doing it. Unless I'm totally missing something and this does work with Angular 2?

[ShawnPavel]

It does work with Angular2.

Are you handling the onMapReady event and adding the marker after you have a reference to the map?

[Josh-Hicks]

Maybe I'm missing something. Is there any way you could setup a quick Plunkr to show me how I would add this in an Angular 2 component? Or is the module file with the functions in a separate file that needs to be imported into the component? I can't seem to create a new instance of the Marker. Or attach it to the mapview.

[ShawnPavel]

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

[Josh-Hicks]

This is exactly what I was looking for. Thanks! I didn't think about importing the Marker that way.

[Dangradz]

I still have the issue also if I put the image into the app_resourse folder as you said...

[ShawnPavel]

@Dangradz if you use a resource from the app_resources folder you will reference it like this: imageSource.fromResource('markerFood');

[Josh-Hicks]

@ls-spavel Actually, after trying to implement the code you posted I just get a blank screen. Any idea why that might be happening?

[Dangradz]

@ls-spavel same error, this is the code var marker = new mapsModule.Marker(); marker.title=res.value.description; var icon = new imageModule(); icon.imageSource = imageSource.fromResource('icon.png'); icon.width=50; icon.height=50; marker.icon=icon; marker.userData={type: 'post:'+res.key}; marker.position = mapsModule.Position.positionFromLatLng(res.value.lat,res.value.lng); map.addMarker(marker);

Error "Canno read property 'android' of null tns_modules/nativescript-google-maps-sdk/map-view.js"

[Josh-Hicks]

@ls-spavel I found that if I add this code, the map shows up again. I'm not sure why though.

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

[im4eversmrt]

I been trying to load the marker map icon with no luck at all , anyone here has any idea on how to do this ?

[Josh-Hicks]

@im4eversmrt what problems are you having specifically? Is it related to this issue? If not, you can try getting help at https://nativescriptcommunity.slack.com

[im4eversmrt]

Im fetching a bunch of icons from api to set as map market icons I tried loading the image url and setting it to the marker.icon but never worked i can set an icon as a resource icon but i cant from the internet which i need at the moment.

[im4eversmrt]

@Josh-Hicks no one even listened to me at the community in slack

[mpcarr]

@Dangradz you do not need to .png extension when referencing a resource.

icon.imageSource = imageSource.fromResource('icon.png');

should be

icon.imageSource = imageSource.fromResource('icon');