Marker's icon on google map


#1

When I try to set a Icon image to a new marker I get this error:
“Cannot read property android of null…”

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


#2

Hello Dan,

Here I paste a piece of my code that works properly, although seems very similar to your.

let home = new Image();
home.imageSource = imageSource.fromResource( MapUtilService.HOME_ICON );
mapView = this.mapUtilService.getDefaultConfig( mapView );
const marker = this.mapUtilService.createMarker( ...)             
mapView.addMarker( marker );

Create marker contains very simple straight forward code.

       createMarker( mapPoint:any, title:any, index:any, draggable:any, visible:any, icon:any ) {
		var marker:any = new mapModule.Marker();
		marker.position = mapPoint;
		marker.title = title;
		marker.draggable = draggable;
		marker.visible = visible;
		marker.userData = { index : index };

		if ( icon ) {
			marker.icon = icon;
		}
		return marker;
	}

And finally the method getDefaultConfig returns the map with the some settings preset being either android or ios.
We grab each map differently, but I think due to how the settings are set.
In case of Android we grab it from “mapView.gMap” and on ios we grab it from “mapView.ios”

Hope this throw a light, although your code seems pretty similar.
Pointing a useless difference, we do set up the icon after the position, but do not see how that might affect.


#3

Can you past your code into the map-view.js (into the nativescript-google-map-sdk folder) at line 474? My problem is there…


#4

What would you like to review exactly.
The line is this one.

var androidIcon = com.google.android.gms.maps.model.BitmapDescriptorFactory.fromBitmap(value.imageSource.android);

would you like to see the “value” content? or something else?


#5

I have your exact code, it says that “.android” is not a function :\


#6

noboy has solved this problem?


#7

I have already the issue :\


#8

I could get this working by using the following code (note this applies only if you want to load a marker from a file)!

      marker =new mapsModule.Marker();
      marker.position = position;
      let icon = new Image();
      icon.src = '~/images/apple.png';//This seems to be redundant
      icon.imageSource = imageSource.fromFile('~/images/apple.png');  //This is where you load image from file.

      marker.icon=icon;
      
      mapView.addMarker(marker);

#9

Hi,

var icon = new Image();
icon.src = '~/images/pin.png';
icon.imageSource = imageSource.fromFile('~/images/pin.png');
marker.icon=icon;

I’ve end up with the following:

file:///app/studio/location.js:64:25: JS ERROR ReferenceError: Can't find variable: Image

Any ideas on this guys ?
Thank you.


#10
var imgModule = require( "ui/image" );

    let icon = new imgModule.Image();
    icon.src = '~/images/pin.png';
    icon.imageSource = imageSource.fromFile('~/images/pin.png');

    marker.icon=icon;

will return ;
JS ERROR ReferenceError: Can’t find variable: imageSource


#11

You must find that image-source is also a module from tns-core-module, which you have to import here.


#12

var image-source = require( "image-source" );

Excellent.
Thanks.