Nazwa i opis punktu GeoJSON nie są wyświetlane podczas korzystania z interfejsu API Google Map V3

Question

Zaczynam używać JavaScript API Map Google V3 i chcę wyświetlać znaczniki na mapie przy użyciu GeoJSON. Moja GeoJSON jest następujący:

{ 
    "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" 
      } 
     } 
    ] 
} 

A mój kod JavaScript, aby załadować 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); 

Uwaga: URL "fieldDataGeoJSON .." zwraca GeoJSON, jak można się już zorientowali się.

To działa dobrze: znaczniki są wyświetlane na mapie, w dobrej lokalizacji. Ale pola "nazwa" i "opis" obecne w GeoJSON nie są połączone ze znacznikami, co oznacza, że ​​nie są wyświetlane po kliknięciu znacznika.

Sądzę, że pierwsze pytanie brzmi: "Czy ma być wspierane?". Jeśli nie, to znaczy, że muszę przeanalizować GeoJSON, aby dodać nazwy i opisy? Czy masz jakieś wskazówki, jak to osiągnąć?

Z góry dziękujemy za pomoc!

Answer 1

Zwykłe Google Maps Javascript API v3 event listeners działa podobnie jak normalnie 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