Data Layer Google maps Api V3, Eventos e Infowindow

La capa de datos Maps Google proporciona un contenedor para datos geoespaciales arbitrarias. puede utilizar la capa de datos para almacenar sus datos personalizados, o para mostrar datos GeoJSON en un mapa google .

GeoJSON es una norma común para el intercambio de datos geoespaciales en Internet. es ligero y fácilmente legible, por lo que es ideal para compartir y colaborar. con la capa de datos, puede agregar datos GeoJSON a un mapa de google en una sola línea de código.

Acontinuación un ejemplo, el html completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Event Handling</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    #info-box {
      background-color: white;
      border: 1px solid black;
      bottom: 30px;
      height: 20px;
      padding: 10px;
      position: absolute;
      left: 30px;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>

    var map, 
    opened, 
    infowindow, 
    marker, 
    myLatlng = new google.maps.LatLng(-23.576 , 133.883);

var stuffToDo = {    
    'click': function(event) {
        opened = true;        
        stuffToDo['on'](event);
        infowindow.setContent(event.feature.getProperty("leyend"));
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
    }, 
    'on': function(event){
        !opened ? function(){
            map.data.overrideStyle(event.feature, 
            {
                strokeWeight: 2, 
                fillOpacity: 0.8,
            });
            document.getElementById('info-box').textContent = 
            event.feature.getProperty('letter');
        }() : null
    },
    'off': function(event){
        !opened ? map.data.revertStyle() : null
    },
    'closeclick': function(event){
        map.data.revertStyle();
        opened = false;
    }
};

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: myLatlng
  });

  infowindow = new google.maps.InfoWindow();

  // Load GeoJSON.
  map.data.loadGeoJson('assets/google.json');

  // Add some style.
  map.data.setStyle(function(feature) {
    return /** @type {google.maps.Data.StyleOptions} */({
        clickable: true,
        fillColor: feature.getProperty('color'), // esta propiedad se obtiene de la carga del geoJson
        visible: true,
        zIndex: 1,
        cursor: 'pointer',
        strokeWeight: 1.5,
        strokeOpacity: 1,
        strokeColor: feature.getProperty('color'),
        fillOpacity: 0.4,
    });
  });
 
  // [START snippet]
  // Set mouseover event for each feature.
      map.data.addListener('click', stuffToDo['click']);   
      map.data.addListener('mouseover', stuffToDo['on']);   
      map.data.addListener('mouseout', stuffToDo['off']);  
      google.maps.event.addListener(infowindow,'closeclick', stuffToDo['closeclick']);      

  // [END snippet]
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="info-box">?</div>
  </body>
</html>