Ir al contenido principal

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:

http://www.mediafire.com/download/4g7k2xg3042tsha/testDataLayer.rar

<!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>

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Dado el costo de un computador portátil y la cantidad de dinero entregado por el cliente, calcule e imprima el cambio que debe devolvérsele al cliente.

Proceso Valor_Venta  vPC=0  pEfectivo=0  vCambio=0  Escribir 'Valor del PC'  Leer vPC  Escribir 'Pago efectivo $'  Leer pEfectivo  Si (vPC>0) Entonces   Si (pEfectivo>0) Entonces    vCambio=pEfectivo-vPC    Si (vCambio>0) Entonces     Escribir 'Gracias por su compra, su cambio es: $',vCambio    Sino     Escribir 'Falta dinero para completar su compra'    FinSi   Sino    Escribir 'El valor del pago debe ser mayor que cero'   FinSi  Sino   Escribir 'El valor del computador debe ser mayor que cero'  FinSi FinProceso Diagrama de Flujo: Deja tu comentario  o  agradecimiento...
3 comentarios
Leer más

Fireworks CS3 portable

Para que hagas los logos, botones e imagenes para tus aplicaciones facil y rapido... ¿Qué es Fireworks? Adobe Fireworks es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash ), pero con más parecido a un taller destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. Originalmente fue desarrollado por Macromedia , compañía que fue comprada en 2005 por Adobe Systems . Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash . Integración con Adobe Flash La integración con Adobe Flash se ha ido reduciendo paulatinamente desde que Flash, en su versión 7, integró la herramienta PolyStar que hace un polígono...
Publicar un comentario
Leer más

Calculadora JFrame con lenguaje Java

import java.awt.* ; import java.awt.event.* ; import javax.swing.* ; import javax.script.ScriptEngine ; import javax.script.ScriptEngineManager ; import javax.script.ScriptException ; /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * * @author jeisonnisperuza */ public class Calculadora extends JFrame implements ActionListener {     // argumentos y componentes     private JFrame frame ;     private JPanel panel1 = new JPanel ();     private JPanel panel2 = new JPanel ();     private JTextField texto , campoTexto1 , campoTexto2 ;     private String resultado ;     private String formula = "" ;     private int a = 0 ;         ...
Publicar un comentario
Leer más