Changing Google Maps marker icons through geojson properties

By Isaias Hoyos

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?

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273