Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GeoJSON Point name & description not displayed when using Google Map API V3

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!

like image 789
Frederic Desy Avatar asked Jun 05 '14 02:06

Frederic Desy


People also ask

What is a Point in GeoJSON?

The Point datatype is very similar to the Location datatype. It represents a location on the Earth as a WGS84 Latitude and Longitude. The location is encoded as a GeoJSON “point”.

How is GeoJSON structured?

GeoJSON is a format for encoding a variety of geographic data structures. GeoJSON supports the following geometry types: Point , LineString , Polygon , MultiPoint , MultiLineString , and MultiPolygon . Geometric objects with additional properties are Feature objects.

Is GeoJSON lat lon or Lon Lat?

1 Answer. Show activity on this post. Nothing is in the wrong order. Leaflet uses lat-lng (or northing-easting ) whereas GeoJSON uses lng-lat (or easting-northing ).

What is a polygon in GeoJSON?

geojson.org. The features include points (therefore addresses and locations), line strings (therefore streets, highways and boundaries), polygons (countries, provinces, tracts of land), and multi-part collections of these types.


1 Answers

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.com/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

like image 162
geocodezip Avatar answered Sep 23 '22 12:09

geocodezip