Откройте инфоинструмент определенного маркера со стороны Google Maps (V3)

Кажется, я не могу решить эту проблему:

У меня есть карта с (многими) маркерами (компаниями), которые поступают из сгенерированного XML файла. Под картой я хочу показать список всех компаний, отображаемых на карте (не с JavaScript). Когда я нажму на компанию в списке, карта переместится на этот конкретный маркер и откроет информационное окно. Дело в том, что я хочу, чтобы карта и список были двумя отдельными вещами...

Каким будет правильный способ решить эту проблему? Благодарю! Важно, что все markerinfo динамически...

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

Следуя рекомендациям Михала, я пробовал следующее, но сталкиваюсь с двумя проблемами: моя консоль сообщает мне markers[index].getPosition is not a function, и первый элемент в моем списке показывает undefined. Не могли бы вы помочь?

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

Ответы

Ответ 1

Вы на правильном пути. Вам просто нужно создать отдельный глобальный массив для объектов Marker и нажать все созданные маркеры в этот массив. Когда вы выписываете все данные своей компании в html, включайте вызов с индексом маркера, выполненным по клику. Ниже приведен пример кода. Я использовал JSON как свою структуру данных для хранения информации о компании вместо 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}		
            ]
        }
        //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();
        }		 

        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>

Ответ 2

так как я не могу удалить этот ответ, я решил добавить некоторые примечания!

если ваш формат xml похож на этот: http://www.w3schools.com/dom/books.xml

вы можете получить доступ к author nodeValue со следующими строками.

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

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

надеюсь, что это кому-то поможет:)