Nome punto geoJSON e descrizione non visualizzati quando si utilizza API di Google Maps V3

Question

Sto iniziando a utilizzare l'API di Google Maps Javascript V3 e desidero visualizzare gli indicatori su una mappa, utilizzando GeoJSON. La mia GeoJSON è la seguente:

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

E il mio codice JavaScript per caricare il 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); 

Nota: l'URL "fieldDataGeoJSON .." restituisce il GeoJSON, come forse avrete già capito.

Questo funziona bene: i contrassegni sono mostrati sulla mappa, nella buona posizione. Ma i campi "nome" e "descrizione" presenti nel GeoJSON non sono collegati ai marcatori, il che significa che non vengono visualizzati quando clicco sul marcatore.

Immagino che la prima domanda sia: "Dovrebbe essere supportato?". In caso contrario, significa che devo analizzare il GeoJSON per aggiungere nomi e descrizioni? Hai qualche suggerimento su come raggiungere questo obiettivo?

Grazie in anticipo per il vostro aiuto!

Answer 1

L'API di Google Maps normale v3 event listeners funziona come normale 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