Afficher certaine InfoWindow dans Google Map API V3

J'ai écrit le code suivant pour afficher les marqueurs. Il y a 2 boutons qui montrent l'Infowindow suivant ou précédent pour les marqueurs. Mais le problème est que InfoWindows ne sont pas affichés en utilisant google.maps.event.trigger Quelqu'un peut-il m'aider avec ce problème. Je vous remercie. Voici le code:Afficher certaine InfoWindow dans Google Map API V3

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Common Loader</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var infowindow; 
    var map; 
    var bounds; 
    var markers = []; 
    var markerIndex=0; 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(41.051407, 28.991134); 
    var myOptions = { 
     zoom: 5, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     markers = document.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
            parseFloat(markers[i].getAttribute("lng"))); 
     var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance")); 
     } 
    rebound(map); 
    } 

    function createMarker(name, latlng, phone, distance) { 
    var marker = new google.maps.Marker({position: latlng, map: map}); 

    var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>"; 

    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({content: myHtml}); 
     infowindow.open(map, marker); 
    }); 
    return marker; 
    } 

    function rebound(mymap){ 
    bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")))); 
    } 
    mymap.fitBounds(bounds); 
    } 

    function showNextInfo() 
    { 
    if(markerIndex<markers.length-1) 
      markerIndex++; 
    else 
      markerIndex = 0 ; 
    alert(markers[markerIndex].getAttribute('name')); 
    google.maps.event.trigger(markers[markerIndex],"click"); 
    } 
    function showPrevInfo() 
    { 
    if(markerIndex>0) 
      markerIndex--; 
    else 
      markerIndex = markers.length-1 ; 
     google.maps.event.trigger(markers[markerIndex],'click'); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:400px; height:300px"></div> 
<markers> 
<marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/> 
<marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/> 
<marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/> 
<marker name='Name4' lat='41.' lng='26.978350' phone='+902121234562' distance=''/> 
</markers> 
<input type="button" onclick="showPrevInfo()" value="prev">&nbsp;<input type="button" onclick="showNextInfo()" value="next"> 
</body> 
</html>

Source

2009-09-26 pash

c'est comment je fais

espère qu'il peut aider;)

/** 
    * map 
    */ 
    var myLatlng = new google.maps.LatLng(39.980278, 4.049835); 
    var myOptions = { 
    zoom: 10, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false 
    } 
var map = new google.maps.Map(document.getElementById('mapa'), myOptions); 

var infoWindow = new google.maps.InfoWindow(); 
var markerBounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function makeMarker(options){ 
    var pushPin = new google.maps.Marker({map:map}); 
    pushPin.setOptions(options); 
    google.maps.event.addListener(pushPin, 'click', function(){ 
    infoWindow.setOptions(options); 
    infoWindow.open(map, pushPin); 
    }); 
    markerArray.push(pushPin); 
    return pushPin; 
} 

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

function openMarker(i){ 
    google.maps.event.trigger(markerArray[i],'click'); 
}; 

/** 
*markers 
*/ 
makeMarker({ 
    position: new google.maps.LatLng(39.943962, 3.891220), 
    title: 'Title', 
    content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>' 
}); 

openMarker(0);

Source

2010-03-18 16:30:05 Xavier

Ce code ne fonctionne pas parce qu'il déclenche click événement markers[markerIndex] qui n'est pas un marqueur de carte mais des informations sur l'élément DOM avec l'étiquette .

Pour le faire fonctionner, vous devez ajouter tableau global qui contiendra la liste des marqueurs de carte:

var markerList = [];

changement de fonction initialize() pour pousser marqueur de carte à cette liste pour la boucle:

markerList.push(marker);

Modifier les fonctions showNextInfo() et showPrevInfo() pour déclencher un événement sur le marqueur de carte:

//google.maps.event.trigger(markers[markerIndex], "click"); 
google.maps.event.trigger(markerList[markerIndex], "click");

Source

2014-01-21 09:56:04

Afficher certaine InfoWindow dans Google Map API V3

Répondre

Questions connexes