aperta infowindow del marcatore specifico al di fuori di Google Maps (V3)

Question

io non riesco a ottenere la mia testa intorno a questo problema:

Ho una mappa con la (un sacco di) marcatori (aziende) che vengono da un file XML generato. Sotto la mappa, voglio mostrare un elenco (non generato da JavaScript) di tutte le aziende visualizzate sulla mappa. Quando facevo clic su una società nell'elenco, la mappa eseguiva una panoramica su quel marcatore specifico e apriva una finestra di informazioni. Il fatto è che voglio che la mappa e la lista siano due cose separate ...

Quale sarebbe il modo giusto per affrontare questo problema? Grazie! Importante è che tutti markerinfo è dinamico ...

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() {} 

Seguendo i suggerimenti di Michal, ho provato quanto segue, ma sto incontrando due problemi: la mia console mi dice markers[index].getPosition is not a function e la prima voce nella mia lista mostra a essere undefined. Puoi per favore aiutare?

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

Sei sulla strada giusta. Hai solo bisogno di creare un array globale separato per i tuoi oggetti Marker e spingere tutti gli indicatori creati su questo array. Quando scrivi tutti i dati della tua azienda in html includi una chiamata con l'indice del marcatore eseguito al clic. Di seguito è riportato un codice di esempio. Ho usato JSON come struttura dati per contenere informazioni sulla società anziché 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 ho aggiunto un'altra soluzione per voi - uising codice. Questo usa la funzione bindInfWindow per associare l'evento click DOM (HTML) per aprire la finestra informativa e scorrere fino all'indicatore. Tieni presente che poiché stai caricando le società in modo dinamico, i div (o alcuni altri tag) che contengono i loro nomi e ID devono esistere nel DOM PRIMA di iniziare ad associare eventi ad esso - quindi la prima funzione che devi eseguire è quella che rende le aziende HTML (non la mappa init). Si prega di notare che non ho testato questo uno come non ho i dati ..

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

dal momento che non è possibile rimuovere questa risposta, ho deciso di aggiungere alcune note!

se il formato XML è simile a questo: http://www.w3schools.com/dom/books.xml

è possibile accedere autore nodeValue con righe seguenti.

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

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

Speranza che aiuta qualcuno :)