Ouvrir InfoWindow de marqueur spécifique de l'extérieur Google Maps (V3)

Question

Je ne peux pas sembler obtenir ma tête autour de ce problème:

J'ai une carte avec (beaucoup) marqueurs (entreprises) qui viennent à partir d'un fichier XML généré. Sous la carte, je souhaite afficher une liste (non générée par JavaScript) de toutes les entreprises affichées sur la carte. Lorsque je cliquais sur une société dans la liste, la carte effectuait un panoramique vers ce marqueur spécifique et ouvrait une infoWindow. La chose est que je veux que la carte et la liste soient deux choses distinctes ...

Quelle serait la bonne façon de résoudre ce problème? Merci! L'important est que tout markerinfo est dynamique ...

function initialize_member_map(lang) { 
    var map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    downloadUrl("/ajax/member-xml-output.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    var company = markers[i].getAttribute("company"); 
    var address = markers[i].getAttribute("address"); 
    var type = markers[i].getAttribute("type"); 
    var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL 
    var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
    var html = "<b>" + company + "</b> <br/>" + address; 
    bounds.extend(point);  
    var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid // Some experiments, wanted to use this to target specific markers... 
    }); 
    bindInfoWindow(marker, map, infoWindow, html); 
    }   
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
}); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing() {} 

Suite aux suggestions de Michal, j'ai essayé ce qui suit, mais je suis rencontre deux problèmes: ma console me dit markers[index].getPosition is not a function et le premier élément de ma liste montre être undefined. Peux-tu aider s'il te plait?

//JavaScript Document 
var map; 
var markers = new Array(); 
var company_list; 
function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
     company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>"; 
    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 
    }); 

} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing(){ 
} 

Answer 1

Vous êtes sur la bonne voie. Vous avez juste besoin de créer un tableau global séparé pour vos objets Marker et de pousser tous les marqueurs créés dans ce tableau. Lorsque vous écrivez toutes les données de votre entreprise à html inclure un appel avec l'index du marqueur exécuté sur clic. Voici un exemple de code. J'ai utilisé JSON comme structure de données pour stocker les informations de l'entreprise au lieu de XML.

<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
    <title>Google Maps Scroll to Marker</title> 
 

 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 

 
</head> 
 
<body onload="initialize()"> 
 

 
    <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
 
    <div id="companies"></div> 
 
    <script type="text/javascript"> 
 
     var map; 
 
     //JSON of company data - equivalent of your XML 
 
     companies = { 
 
      "data": [ 
 
      { 
 
       "name": "Company 1", 
 
       "lat": 42.166, 
 
       "lng": -87.848 
 
      }, 
 
      { 
 
       "name": "Company 2", 
 
       "lat": 41.8358, 
 
       "lng": -87.7128 
 
      }, 
 
      { 
 
       "name": "Company 3", 
 
       "lat": 41.463, 
 

 
       "lng": -88.870 
 
      }, 
 
      {"name":"Company 4", 
 
      "lat":41.809, "lng":-87.790} \t \t 
 
      ] 
 
     } 
 
     //we will use this to store google map Marker objects 
 
     var markers=new Array(); 
 
     function initialize() { 
 
      var chicago = new google.maps.LatLng(41.875696,-87.624207); 
 
      var myOptions = { 
 
       zoom: 9, 
 
       center: chicago, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      } 
 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
 
       myOptions); 
 
      listCompanies(); 
 
     } \t \t 
 

 
     function listCompanies() { 
 
      html = "" 
 
     //loop through all companies 
 
     for (i=0;i<companies.data.length;i++) { 
 
     //get the maker postion 
 
     lat = companies.data[i].lat 
 
     lng = companies.data[i].lng 
 

 
     //add google maps marker 
 
     marker = new google.maps.Marker({ 
 
      map:map, 
 
      position: new google.maps.LatLng(lat,lng), 
 
      title: companies.data[i].name 
 
     }) 
 
     markers.push(marker); 
 
     html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>"; 
 
     } 
 
     //display company data in html 
 
     document.getElementById("companies").innerHTML =html; 
 
     } 
 

 
     function scrollToMarker(index) { 
 
      map.panTo(markers[index].getPosition()); 
 
     } 
 
</script> 
 

 
</body> 
 
</html>

Ok j'ai ajouté une autre solution pour vous - uising votre code. Celui-ci utilise votre fonction bindInfWindow pour lier l'événement click DOM (HTML) pour ouvrir la fenêtre d'informations et faire défiler jusqu'à marker. Veuillez noter que comme vous chargez dynamiquement les entreprises, les divs (ou d'autres tags) qui contiennent leurs noms et identifiants doivent exister dans le DOM AVANT de commencer à lier des événements. La première fonction à exécuter est donc celle qui restitue les entreprises. HTML (pas la carte init). S'il vous plaît noter que je ne l'ai pas testé celui-ci comme je n'ai pas vos données ..

//you must write out company divs first 

<body onload="showCompanies()"> 



<script> 
//JavaScript Document 
var map; 
//this is your text data 
var markers = new Array(); 


//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized 
function showCompanies() { 
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 

     markerId = "id_"+i; 

     company_list += "<div id="+markerId+">"+company+"</div>"; 
    }  

    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 

    //now you are ready to initialize map 
    initialize_member_map("lang") 
    }); 
} 

function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 




    var xml = data.responseXML; 

    var bounds = new google.maps.LatLngBounds(); 
    //your company data was read in and is ready to be mapped 
    for (var i = 0; i < markers.length; i++) { 
     var infoWindow = new google.maps.InfoWindow; 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     //add the new marker object to the gMarkers array 

     markerId = "id_"+i; 
     bindInfoWindow(marker, map, infoWindow, html,markerId); 

    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 


} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html, markerId) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    //bind onlcick events to the div or other object in html 
    markerObj = document.getElementById(markerId); 
    //you can create DOM event listeners for the map 
    google.maps.event.addDomListener(markerObj, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    map.panTo(marker.getPosition()); 
    }); 

} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 
function doNothing(){ 
} 

</script> 

Answer 2

depuis que je ne peux pas enlever cette réponse, j'ai décidé d'ajouter quelques notes!

si votre format XML est semblable à ceci: http://www.w3schools.com/dom/books.xml

vous pouvez accéder auteur nodeValue avec des lignes suivantes.

markers = xml.documentElement.getElementsByTagName("book"); 

for (var i = 0; i < markers.length; i++) { 
    authors = markers[i].getElementsByTagName('author')[0].innerHTML; 
} 

espère que cela aide quelqu'un :)