CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3
doubleplusgood
doubleplusgood

Reputation: 2556

Custom markers for points from a geoJson file with Google Maps

I'm using GeoJSON as a data source for Google Maps. I'm using v3 of the API to create a data layer as follows:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {

  //Initialise the map
  var myLatLng = new google.maps.LatLng(53.231472,-0.539783);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 17,
    center: myLatLng,
    scrollwheel: false,
    panControl: false,
    zoomControl: false,
    scaleControl: true,
    disableDefaultUI: true
  });

  //Initialise base folder for icons
  var iconBase = '/static/images/icons/';

  //Load the JSON to show places
  map.data.loadGeoJson('/api/geo');

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

The source of my GeoJSON data is as follows:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "icon": "/static/images/icons/map-marker-do.png",
        "coordinates": [
          -0.53743,
          53.23437
        ]
      },
      "properties": {
        "name": "Cathedral",
        "description": "One of Europe’s finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.",
        "icon": "/static/images/icons/map-marker-do.png"
      }
    }
  ]
}

What I'm trying to do is make the marker icon on the map come from the "icon" property in the JSON, but cannot figure out how to get the data to change the default marker. Can anyone offer any advice? Thanks.

Upvotes: 23

Views: 19193

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

Use a styling-function(styling-functions enable you to apply styles based on a specific feature)

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

Upvotes: 42

Related Questions