Question

I’m doing the following to add markers to a google map from an array.

My question refers to the end of the function where im trying to set marker.icon = imageUnlikely; I’m trying to get the marker to be an image not the standard Google maps marker, but it doesn’t work. If I add icon: imageUnlikely to the marker object the image displays correctly.

Any ideas?

var imageUnlikely = new google.maps.MarkerImage('/BeachApp/maps/Unlikely.PNG', new google.maps.Size(15, 14));

function SetupMarkers(map, locations) {
var shapeNoUpdate = {
coord: [0, 0, 218, 200],
type: 'rect'
};

var shapeWithUpdate = {
coord: [1, 1, 1, 20, 55, 20, 55, 1],
type: 'poly'
};

for (var i = 0; i < locations.length; i++) {

    var beach = locations[i];

    var beachId = beach[7];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,   
        shape: shapeNoUpdate,
        title: beach[0] + ' - pollution ' + beach[4],
        beachId: beachId,        
        arrayIndex: i

    });

    if (beach[4] == 'Unlikely') {
        marker.icon = imageUnlikely;
    } 

}
}

SetupMarkers(map4, beaches4);

Answer 1

Don’t use undocumented properties (the google.maps.Marker doesn’t have any documented properties). Use the documented methods, in this case setIcon().

Example (not tested):

 if (beach[4] == 'Unlikely') {
    marker.setIcon(imageUnlikely);
 }