2013-10-14 4 views
1

Je simple Google Maps exemple JS fichier:Google Maps InfoWindow addDomListener Button HTML

/*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     panControl: false, 
     mapTypeControl: true, 
     scaleControl: true, 
     mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // add Map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // add Marker 
    var marker1 = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(-25.363882,131.044922) 
    }); 

    // add Info Window 
    var infoWindow = new google.maps.InfoWindow(); 

Maintenant, je veux ouvrir la boîte d'information lorsque je clique sur un bouton dans le mon modèle html:

fichier HTML:

<body onload="initialize()"> 
... 
<div id="map_canvas"></div> 
... 
<button id="test">Click</button> 
... 
</body> 

ajoutant ces lignes à mon JS fichier:

var onMarkerHTMLClick = function() { 

     var marker = this; 
     var latLng = marker.getPosition(); 
     var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>'; 

     map.panTo(marker.getPosition()); 
     map.setZoom(15); 

     infoWindow.setContent(content); 

     infoWindow.open(map, marker); 
    }; 

    google.maps.event.addListener(map, 'click', function() { 
     infoWindow.close(); 
    }); 

    google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick); 

erreur: marker.getPosition n'est pas une fonction pourquoi cela fonctionne pas? Si je fais la même chose avec une fonction de clic sur le marqueur lui-même la fenêtre s'ouvre sans problème ..

+0

Le bouton n'est pas un marqueur? Ah ok –

Répondre

1

Vous devez déclencher l'événement qui ouvre la InfoWindow. Probablement la chose la plus facile à faire est de stocker vos marqueurs dans un tableau global ou si vous n'avez pas beaucoup, il suffit de les sélectionner par ID.

Exemple

var myButton = document.getElementById('THE_ID'); 
google.maps.event.addDomListener(myButton, 'click', openInfoWindow); 

openInfoWindow étant juste la fonction de rappel où vous pouvez déclencher l'événement.

+1

cela devrait fonctionner et je dois mettre le marqueur var = marker1; au lieu de var marker = this; – Jim