How to add label and title to point (marker) in geoJSON that would show up on Google Maps once loaded

Question

How do I add a label text in geoJSON so it shows up on the marker (point) on Google Maps?

I have been trying this, but the label or title are not showing up.

"type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [7.090301513671875,44.66743203082226]
    },
    "properties": {
      "label": "W",
      "title": "World Wide Web"
  }]
}

I am generating the point json, and each marker would have a different marker. Also I may need to style it individually.

Any thought, suggestions? Thank you.

Answer 1

First, your geojson is invalid. Use this:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[7.090301513671875,44.66743203082226]},"properties":{"label":"W","title":"World Wide Web"}}]}

Second, you can add custom markers in a setStyle callback like so:

map.data.setStyle(function (feature) {
    return {
        icon: {
            path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
            fillColor: '#FF0000',
            fillOpacity: .6,
            anchor: new google.maps.Point(0, 0),
            strokeWeight: 0,
            scale: 1
        }
    };
});

This means you can generate markers with custom SVG icons and add event handlers to them.