Changing Google Maps marker icons through geojson properties

Question

I have to plot markers in Google Maps, using geojson files like this:

{"type": "FeatureCollection", "features": [{"geometry": {"type": "Point", 
"coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7623641788643, -10.7500605616405]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.77211472346339, -10.728081474512]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7614956126977, -10.750647917225699]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76185649510131, -10.7516817240557]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76185649510131, -10.7516817240557]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.76242552657358, -10.749107039737899]}, "type": 
"Feature", "properties": {"icon": "chart_red.png"}}, {"geometry": {"type": 
"Point", "coordinates": [-77.7469388021172, -10.7729040573081]}, "type": 
"Feature", "properties": {"icon": "chart_green.png"}}]}

where every marker is represented by a Feature with Point geometry and have a property named "icon" that points to a marker image in the same domain. Using the following javascript code, I'm able to plot the markers, but all of them have the default red marker image.

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: -12, lng: -77},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var histPlacesCoordinates = map.data.loadGeoJson('hist1.geojson');
    for (var i = 0, length = histPlacesCoordinates.features.length; i < length; i++) {
      var data = histPlacesCoordinates.features[i],
        latLng = new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]);

      var histPlaces = new google.maps.Marker();
      histPlaces.setStyle({
          position: latLng, 
          map: map,
          icon: data.feature.getProperty("icon")
        });
    }
  }

What have I to correct to get each marker drawn with the icon specified in the geojson icon property?

Answer 1

I made it working here..Please see the fiddle

 function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: -12,
      lng: -77
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var markerCollection = map.data.addGeoJson(geoJson);
  for (var i = 0, length = markerCollection.length; i < length; i++) {
    var feature = markerCollection[i];
    debugger;
    if (feature.getProperty('icon')) {
      map.data.setStyle(function(feature) {
        return {
          icon: feature.getProperty('icon')
        };
      });
    }
  }
}

Since I am loading geoJson from a variable I have used addGeoJson method. That method will return the feature collection. So we will iterate that and add style to each feature.

  map.data.setStyle(function(feature) {
    return {
      icon: feature.getProperty('icon')
    };
  });

Also note that, loadGeoJson return value is null. see this answer. so your variable histPlacesCoordinates will be undefined or null.

If you are planning to use loadGeoJson then you will get the featureCollection inside the callback. You can set the icon in that callBack by iterating that array also.

loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array))