load custom icon per point with geojson in google maps apiv3

Question

I have been using google maps for awhile now and have run into limitations with the kml layer(no mouseover only click)

so I thought I would tryout the data layer(geojson)

I cannot seem to figure out how to change the icons(marker image).

I am able to change all the markers to a specific image but I would like to be able to use one of 8 different images depending on the feature.property.generated from my db

 map.data.loadGeoJson('http://www.example.com/geojson.php?city_id=017');
     // Set mouseover event for each feature.
      map.data.addListener('mouseover', function(event) {
        $('.map-tooltip').text(event.feature.getProperty('name'));
      });

my JSON FILE

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.1405,
               33.551667
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_0.png",
         "properties":{
            "name":"017001",
            "heading":null,
            "face":"North"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.123269,
               33.552172
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_90.png",
         "properties":{
            "name":"050010",
            "heading":null,
            "face":"East"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.122675,
               33.55155
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_60.png",
         "properties":{
            "name":"050011",
            "heading":null,
            "face":"South"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.120978,
               33.551613
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_30.png",
         "properties":{
            "name":"050012",
            "heading":null,
            "face":"West"
         }
      },
         {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.118667,
               33.6055
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_walk_18.png",
         "properties":{
            "name":"017069",
            "heading":null,
            "face":"SE"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.118667,
               33.6055
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_111.png",
         "properties":{
            "name":"017069",
            "heading":null,
            "face":"SW"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.11,
               33.5835
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_81.png",
         "properties":{
            "name":"017070",
            "heading":null,
            "face":"NW"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               -117.11,
               33.5835
            ]
         },
         "icon":"http://maps.google.com/mapfiles/dir_42.png",
         "properties":{
            "name":"017070",
            "heading":null,
            "face":"NE"
         }
      }
   ]
}

so I am not sure how to get the icon files to work TIA for any help

Answer 1

To access the icon property in your geoJson (at least using the dataLayer methods) you need to move it into the "properties" object. Then you can do this (like this example of dynamic styles in the documentation)

map.data.setStyle(function(feature) {
  var icon=null;
  if (feature.getProperty('icon')) {
    icon = feature.getProperty('icon');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    icon: icon
  });
});

proof of concept fiddle

code snippet:

var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    // auto center map on markers
    if (e.feature.getGeometry().getType() === 'Point') {
      bounds.extend(e.feature.getGeometry().get());
    }
    map.fitBounds(bounds);
  });
  // Set the icon from the "icon" property in the geoJson
  map.data.setStyle(function(feature) {
    var icon = null;
    if (feature.getProperty('icon')) {
      icon = feature.getProperty('icon');
    }
    return /** @type {google.maps.Data.StyleOptions} */ ({
      icon: icon
    });
  });
  map.data.addGeoJson(geoJson);
}
google.maps.event.addDomListener(window, "load", initialize);

// modified geoJson
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.1405,
        33.551667
      ]
    },

    "properties": {
      "name": "017001",
      "heading": null,
      "face": "North",
      "icon": "http://maps.google.com/mapfiles/dir_0.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.123269,
        33.552172
      ]
    },
    "properties": {
      "name": "050010",
      "heading": null,
      "icon": "http://maps.google.com/mapfiles/dir_90.png",
      "face": "East"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.122675,
        33.55155
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_60.png",
      "name": "050011",
      "heading": null,
      "face": "South"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.120978,
        33.551613
      ]
    },

    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_30.png",
      "name": "050012",
      "heading": null,
      "face": "West"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.118667,
        33.6055
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_walk_18.png",
      "name": "017069",
      "heading": null,
      "face": "SE"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.118667,
        33.6055
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_111.png",
      "name": "017069",
      "heading": null,
      "face": "SW"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.11,
        33.5835
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_81.png",
      "name": "017070",
      "heading": null,
      "face": "NW"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-117.11,
        33.5835
      ]
    },
    "properties": {
      "icon": "http://maps.google.com/mapfiles/dir_42.png",
      "name": "017070",
      "heading": null,
      "face": "NE"
    }
  }]
};

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map_canvas" style="border: 2px solid #3872ac;"></div>