title: Open infoWindow of specific marker from outside Google Maps (V3)
body: <p>I can't seem to get my head around this problem:</p>
  
  <p>I've got a map with (a lot of) markers (companies) that come from a generated XML file. Below the map, I want to show a (non-JavaScript-generated) list of all the companies that are displayed on the map. When I would click a company in the list, the map would pan to that specific marker and open an infoWindow. The thing is that I want the map and the list to be two separate things... </p>
  
  <p>What would be the right way to tackle this problem? Thanks! Important is that all markerinfo is dynamic... </p>
  
  <pre><code>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 &lt; 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 = "&lt;b&gt;" + company + "&lt;/b&gt; &lt;br/&gt;" + 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() {}
  </code></pre>
  
  <p>Following the suggestions by Michal, I've tried the following, but am encountering two problems: my console tells me <code>markers[index].getPosition is not a function</code> and the first item in my list shows to be <code>undefined</code>. Can you please help?</p>
  
  <pre><code>//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 &lt; 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 = "&lt;b&gt;" + company + "&lt;/b&gt; &lt;br/&gt;" + address;
        bounds.extend(point); 
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          uid: uid
        });
        bindInfoWindow(marker, map, infoWindow, html); 
        company_list += "&lt;div onclick=scrollToMarker(" + i + ")&gt;"+company+"&lt;/div&gt;";
      }       
      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(){
  }
  </code></pre>