I am starting to use the Google Map Javascript API V3 and wish to display markers on a map, using GeoJSON. My GeoJSON is as follows:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.236112, -27.779627]
            },
            "properties": {
                "name": "[153.236112, -27.779627]",
                "description": "Timestamp: 16:37:16.293"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.230447, -27.777501]
            },
            "properties": {
                "name": "[153.230447, -27.777501]",
                "description": "Timestamp: 16:37:26.298"
            }
        }
    ]
}

And my JavaScript code to load the GeoJSON:

var map;
var marker;

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: ${lastPosition}
    });

    // Load the associated GeoJSON
    var url = 'fieldDataGeoJSON';
    url += '?deviceId=' + deviceId + '&fieldId=' + fieldId;
    map.data.loadGeoJson(url);
}
google.maps.event.addDomListener(window, 'load', initialize);

Note: the URL "fieldDataGeoJSON.." returns the GeoJSON, as you might have already figured out.

This works well: the markers are shown on the map, at the good location. But the fields "name" and "description" present in the GeoJSON are not linked to the markers, meaning that they are not displayed when I click on the marker.

I guess that the first question would be: "Is it supposed to be supported?". If not, does it mean that I have to parse the GeoJSON to add the names and descriptions? Do you have any hints on how to achieve this?

Thank you in advance for your help!

I am starting to use the Google Map Javascript API V3 and wish to display markers on a map, using GeoJSON. My GeoJSON is as follows:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.236112, -27.779627]
            },
            "properties": {
                "name": "[153.236112, -27.779627]",
                "description": "Timestamp: 16:37:16.293"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.230447, -27.777501]
            },
            "properties": {
                "name": "[153.230447, -27.777501]",
                "description": "Timestamp: 16:37:26.298"
            }
        }
    ]
}

And my JavaScript code to load the GeoJSON:

var map;
var marker;

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: ${lastPosition}
    });

    // Load the associated GeoJSON
    var url = 'fieldDataGeoJSON';
    url += '?deviceId=' + deviceId + '&fieldId=' + fieldId;
    map.data.loadGeoJson(url);
}
google.maps.event.addDomListener(window, 'load', initialize);

Note: the URL "fieldDataGeoJSON.." returns the GeoJSON, as you might have already figured out.

This works well: the markers are shown on the map, at the good location. But the fields "name" and "description" present in the GeoJSON are not linked to the markers, meaning that they are not displayed when I click on the marker.

I guess that the first question would be: "Is it supposed to be supported?". If not, does it mean that I have to parse the GeoJSON to add the names and descriptions? Do you have any hints on how to achieve this?

Thank you in advance for your help!

• javascript
• google-maps
• google-maps-api-3
• geojson

• This example in the documentation adds a mouseover listener, so I would assume you could add an infowindow when that triggers. – geocodezip Commented Jun 5, 2014 at 4:07

1 Answer 1

Normal Google Maps Javascript API v3 event listeners work, as do normal infowindows.

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-27.779627,153.236112)
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    // Load the associated GeoJSON
    var url = 'http://www.geocodezip./fieldDataGeoJSON.txt';
    map.data.loadGeoJson(url);

  // Set event listener for each feature.
  map.data.addListener('click', function(event) {
     infowindow.setContent(event.feature.getProperty('name')+"<br>"+event.feature.getProperty('description'));
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

working example