Evento desencadenante con InfoWindow o InfoBox al hacer clic en Google Map API V3

Quiero saber cómo desencadenar un evento cuando hago clic en una ventana de información utilizando Google Maps API v3. En este ejemplo, cuando hago clic en un marcador, aparece una ventana de información con un mensaje único, según el marcador en el que hice clic. Quiero también podrá hacer clic en la ventana de información y tienen un espectáculo de alerta hasta que diceEvento desencadenante con InfoWindow o InfoBox al hacer clic en Google Map API V3

"Que ha hecho clic en la ventana de información para (__ relleno en la localización en blanco _)

he encontrado algunos ejemplos de uso de Google Maps API v2 y jQuery, pero no con la edad simplemente Google Maps API v3.

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 

    var map; 
    function initialize() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    function addMarkers() 
    { 
     var marker, i; 
     var infowindow = new google.maps.InfoWindow(); 
     for (i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       title: cityList[i][0] 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       var contentString = '<div id="infoWindow">' 
        +'<div id="bodyContent">' 
        +'<p>' 
        + "This location is:<br>" 
        + marker.title 
        +'</p>' 
        +'</div>' 
        + '</div>'; 
       return function() { 
        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
        google.maps.event.addListener(infowindow, 'click', (function(i){ 
         alert("You clicked on the infowindow for" + cityList[i][0]); 
        })); 
       } 
       })(marker, i)); 
      } 
     } 

</script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

actualización Terminé descifrando esto también para InfoBox, que se incluye a continuación en mi respuesta.

Fuente

2012-08-24 erin

Puede ser que esté interesado en utilizar snazzy-info-window como alternativa. https://github.com/atmist/snazzy-info-window/blob/master/examples/dynamic-content/scripts.js – Zypps987

Ok, descubrí esto para infoWindow, pero también lo descubrí para InfoBox, ya que es más bonito y más personalizable. Soy nuevo en JavaScript y estos cierres pueden ser muy difíciles.

Para infoWindow

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 

    var map; 
    function initialize() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    var boxText1 = document.createElement("div"); 
      boxText1.id = "boxText1"; 
      boxText1.className = "labelText1"; 
      boxText1.innerHTML = "title1";//this is created earlier 
    var boxList = []; 

    function addMarkers() 
    { 
     var marker, i; 
     var infowindow = new google.maps.InfoWindow({ 
      disableAutoPan: true 
      ,isHidden:false 
      ,pixelOffset: new google.maps.Size(-10, -10) 
      ,closeBoxURL: "" 
      ,pane: "mapPane" 
      ,enableEventPropagation: true 
     }); 
     for (var i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       id: i, 
       title: cityList[i][0] 
      }); 

      var boxText = document.createElement("div"); 
      boxText.id = i; 
      boxText.className = "labelText" + i; 
      boxText.innerHTML = cityList[i][0]; 
      boxList.push(boxText); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       var contentString = '<div id="infoWindow">' 
        +'<div id="bodyContent">' 
        +'<p>' 
        + "This location is:<br>" 
        + marker.title 
        +'</p>' 
        +'</div>' 
        + '</div>'; 

       return function() { 
        infowindow.setContent(boxList[this.id]); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); //end add marker listener 

       google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) { 
         return function() { 
          alert('clicked ' + cityList[i][0]) 
         } 
         })(marker, i)); 
      } //endfor    
     }//end function 

</script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Para InfoBox

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
    <script type="text/javascript" 
    src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"> </script> 
    <script type="text/javascript" 
    src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"> </script> 
    <script type="text/javascript"> 

    var cityList = [ 
    ['Chicago', 41.850033, -87.6500523, 1], 
    ['Illinois', 40.797177,-89.406738, 2] 
    ]; 

    var demoCenter = new google.maps.LatLng(41,-87); 
    var boxList =[]; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 7, 
      center: demoCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
    } 

    function addMarkers(){ 
     for (var i = 0; i < cityList.length; i++) 
     { 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
       map: map, 
       id: i, 
       title: cityList[i][0] 
      });   

      var boxText = document.createElement("div"); 
      boxText.id = i; 
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; 
      boxText.innerHTML = "InfoBox for " + cityList[i][0]; 

      var myOptions = { 
       content: boxText 
       ,disableAutoPan: false 
       ,maxWidth: 0 
       ,pixelOffset: new google.maps.Size(-140, 0) 
       ,zIndex: null 
       ,boxStyle: { 
        background: "url('tipbox.gif') no-repeat" 
        ,opacity: 0.75 
        ,width: "280px" 
       } 
       ,closeBoxMargin: "10px 2px 2px 2px" 
       ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
       ,infoBoxClearance: new google.maps.Size(1, 1) 
       ,isHidden: false 
       ,pane: "floatPane" 
       ,enableEventPropagation: false 
      }; 

      var ib = new InfoBox(myOptions); 
      boxList.push(ib); 

      google.maps.event.addListener(marker,'click',(function(marker, i) { 
       return function() { 
        boxList[i].open(map, this); 
       } 
      })(marker, i)); 

      google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) { 
        return function() { 
         alert('clicked ' + cityList[i][0]) 
        } 
        })(marker, i)); 
     } //endfor 
    } //end function 

    </script> 
</head> 
<body onload="initialize()"> 
    <div id="basic-map" data-role="page"> 
     <div data-role="header"> 
      <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1> 
      <a data-rel="back">Back</a> 
     </div> 
     <div data-role="content"> 
      <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
       <div id="map_canvas" style="height:350px;"></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Fuente

2012-08-24 08:09:48 erin

Gracias por su código de muestra. – rpelluru

Si realizo la función de hacer clic en Infobox, está invocando la función de hacer clic en el marcador. ¿Podría ayudarnos a resolver el problema? Agregue alerta en clic de marcador para depurar el problema. – rpelluru

El código que escribí funciona así: un clic de un marcador se abre y Infobox, luego, una vez que el Infobox está abierto, si hace clic en él, recibirá una alerta. ¿Estás tratando de hacer algo diferente a esto? – erin

El objeto InfoWindow no tiene un evento de 'clic', por lo que no puede hacer

google.maps.event.addListener(infowindow, 'click',....

lugar, se puede asociar un controlador de eventos al objeto DOM, como

function addMarker(latLng, name){ 

var marker = new google.maps.Marker({ 
    map:map, 
    position:latLng 
}); 

G.event.addListener(marker,'click',function(mev){ 
     var div = document.createElement('div'); 
     div.innerHTML = name; 
     div.onclick = function(){iwClick(name)}; 
     infoWindow.setContent(div); 
     infoWindow.setPosition(mev.latLng); 
     infoWindow.open(map); 

    }); 
} 

function iwClick(str){ 
    alert(str); 
};

y le llamaremos con

var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
addMarker(chicago,'chicago');

Fuente

2012-08-24 08:23:13 Marcelo

Gracias! Erin es el hombre! ¡Solucionaste mi problema! ¡Lo estuve atacando por 4 días ahora! Los cierres son un problema en el * si eres nuevo en ellos.

Este es mi código de trabajo (Sencha Touch 2 y Google maps API v3). Permitirá abrir una ventana de información.

var openedInfoWindow = null; 
var boxList = []; 
var marker, i; 

//build info box object 
var infoWindow = new google.maps.InfoWindow({ 
    enableEventPropagation: true, 
}); 

//handle close 
google.maps.event.addListener(infoWindow, 'closeclick', function() { 
    openedInfoWindow = null; 
}); 

//loop trough store data... 
for(i in data) { 
    //data 
    var itemData = data[i].getData(); 

    //marker 
    var geopos = new google.maps.LatLng(itemData['lat'], itemData['lng']); 
    var marker = new google.maps.Marker({ 
     position: geopos, 
     //icon: image, 
     map: map, 
     title: itemData['title'], 
     id: i, 
     animation: google.maps.Animation.DROP 
    }); 

    //add info window content to DOM 
    var boxText = document.createElement("div"); 
    boxText.id = i; 
    boxText.className = "labelText" + i; 
    boxText.data = itemData; 
    boxText.innerHTML = '<b>' + itemData['title'] + '</b>' + (itemData['distance'] ? ' (' + itemData['distance'] + ')' : '') + '<br />' + (itemData['address'] != itemData['title'] ? itemData['address'] : '') + (itemData['price'] ? '<br />' + itemData['price'] : '') + '<br /><a class="button">Meer info</a>'; 
    boxList.push(boxText); 

    //add marker click event 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     if (openedInfoWindow != null) 
      openedInfoWindow.close(); 

     return function() { 
      infoWindow.setContent(boxList[this.id]); 
      infoWindow.open(map, marker); 
      openedInfoWindow = infoWindow; 
     } 
    })(marker, i)); 

    //when infowindow is clicked, open view... 
    google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) { 
     return function(){ 
      iStuddy.app.pushView('kames_detail',boxList[i].data); 
     } 
    })(marker, i)); 
}

Fuente

2012-09-09 21:14:12 Daantje

No pude encontrar ninguna documentación sobre 'enableEventPropagation' en [especificación del objeto infoWindow] (https://developers.google.com/maps/documentation/javascript/ referencia # InfoWindowOptions) (versión 3.24) – edigu

Evento desencadenante con InfoWindow o InfoBox al hacer clic en Google Map API V3

Respuesta

Cuestiones relacionadas