title: Google Maps API & geoxml 3 - Zoom to placemark on click/Center placemark on map
body: <p><strong>UPDATED SCRIPT - with click and zoom/center</strong></p>
  
  <p>Still not quite right, first click shows infoWindow put does not zoom/center</p>
  
  <pre><code>// When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', initialize);
  
  var geoXml = null;
  var geoXmlDoc = null;
  var map = null;
  var myLatLng = null;
  var myGeoXml3Zoom = false;
  var sidebarHtml = "";
  var infowindow = null;
  var kmlLayer = null;
  var filename = "test.kml.xml";
  
      function initialize() {
        myLatLng = new google.maps.LatLng(52.60426, 1.72764);
        // these set the initial center and zoom for the map
        // if it is not specified in the query string
        var lat = 52.60426;
        var lng = 1.72764;
        var zoom = 16;
  
        if (!isNaN(lat) &amp;&amp; !isNaN(lng)) {
          myLatLng = new google.maps.LatLng(lat, lng);
        }
                  var myOptions = {
                      zoom: zoom,
                      center: myLatLng,
                      streetViewControl: false,
                      mapTypeControl: false,
                      zoomControl: true,
                      // How you would like to style the map.
                      // This is where you would paste any style found on Snazzy Maps.
                      styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]}]
                      // zoom: 16,
                      // center: myLatlng,
                  };
                  map = new google.maps.Map(document.getElementById("map"),
                        myOptions);
                  infowindow = new google.maps.InfoWindow({});
  
     geoXml = new geoXML3.parser({
                      map: map,
                      infoWindow: infowindow,
                      singleInfoWindow: true,
                      zoom: myGeoXml3Zoom,
                      afterParse: useTheData
                  });
                  geoXml.parse(filename);
          };
  
  function kmlClick(pm) {
         if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
            google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click");
         } else {
            geoXmlDoc.placemarks[pm].marker.setMap(map);
            google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click");
         }
  
      google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) {
          map.setZoom(19);
          //infoWindow.open(map, marker);
  
          map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition());
      });
  }
  
  function showAll() {
          map.setZoom(16);
          map.panTo(myLatLng);
  }
  
  // == builds the sidebar ==
  
  function makeSidebarEntry(i) {
    var name = geoXmlDoc.placemarks[i].name;
     if (!name  || (name.length == 0)) name = "marker #"+i;
     // alert(name);
     sidebarHtml += '&lt;tr id="row'+i+'"&gt;&lt;td&gt;&lt;img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:kmlClick('+i+');"&gt;'+name+'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';
  }
  
  function makeSidebar() {
    sidebarHtml = '&lt;table&gt;&lt;tr&gt;&lt;/tr&gt;';
    var currentBounds = map.getBounds();
  // if bounds not yet available, just use the empty bounds object;
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  if (geoXmlDoc) {
    for (var i=0; i&lt;geoXmlDoc.placemarks.length; i++) {
      if (geoXmlDoc.placemarks[i].marker) {
        if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
           makeSidebarEntry(i);
        }
      }
    }
  }
    sidebarHtml += "&lt;/table&gt;";
    document.getElementById("sidebar").innerHTML = sidebarHtml;
  }
  
  function useTheData(doc){
    var currentBounds = map.getBounds();
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
    // Geodata handling goes here, using JSON properties of the doc object
    sidebarHtml = '&lt;table&gt;&lt;tr&gt;&lt;/tr&gt;';
  //  var sidebarHtml = '&lt;table&gt;';
    geoXmlDoc = doc[0];
    for (var i = 0; i &lt; geoXmlDoc.placemarks.length; i++) {
      // console.log(doc[0].markers[i].title);
      var placemark = geoXmlDoc.placemarks[i];
      if (placemark.marker) {
        if (currentBounds.contains(placemark.marker.getPosition())) {
           makeSidebarEntry(i);
        }
      }
  
  /*    doc[0].markers[i].setVisible(false); */
    }
    sidebarHtml += "&lt;/table&gt;";
    document.getElementById("sidebar").innerHTML = sidebarHtml;
  };
  </code></pre>
  
  <p>XML:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8'?&gt;
  &lt;kml xmlns='http://www.opengis.net/kml/2.2'&gt;
      &lt;Document&gt;
          &lt;name&gt;Map&lt;/name&gt;
          &lt;description&gt;&lt;/description&gt;
          &lt;Folder&gt;
              &lt;name&gt;Points&lt;/name&gt;
              &lt;Placemark&gt;
                  &lt;name&gt;Placemark 1&lt;/name&gt;
                  &lt;description&gt;Description&lt;/description&gt;
                  &lt;styleUrl&gt;#icon-1239&lt;/styleUrl&gt;
                  &lt;Point&gt;
                      &lt;coordinates&gt;1.7275818,52.6043317,0.0&lt;/coordinates&gt;
                  &lt;/Point&gt;
              &lt;/Placemark&gt;
              &lt;Placemark&gt;
                  &lt;name&gt;Placemark 2&lt;/name&gt;
                  &lt;description&gt;Description&lt;/description&gt;
                  &lt;styleUrl&gt;#icon-1279&lt;/styleUrl&gt;
                  &lt;Point&gt;
                      &lt;coordinates&gt;1.73041,52.60436,0.0&lt;/coordinates&gt;
                  &lt;/Point&gt;
              &lt;/Placemark&gt;
          &lt;/Folder&gt;
          &lt;Style id='icon-1239'&gt;
              &lt;IconStyle&gt;
                  &lt;scale&gt;1.1&lt;/scale&gt;
                  &lt;Icon&gt;
                      &lt;href&gt;http://www.gstatic.com/mapspro/images/stock/1239-poi-civic.png&lt;/href&gt;
                  &lt;/Icon&gt;
              &lt;/IconStyle&gt;
          &lt;/Style&gt;
          &lt;Style id='icon-1279'&gt;
              &lt;IconStyle&gt;
                  &lt;scale&gt;1.1&lt;/scale&gt;
                  &lt;Icon&gt;
                      &lt;href&gt;http://www.gstatic.com/mapspro/images/stock/1279-poi-library.png&lt;/href&gt;
                  &lt;/Icon&gt;
              &lt;/IconStyle&gt;
          &lt;/Style&gt;
      &lt;/Document&gt;
  &lt;/kml&gt;
  </code></pre>
  
  <p>Hi i'm trying to create a custom map using Google Maps API and geoxml3. I have managed to set up the map and add a custom sidebar with a list of placemarks which are loaded from an external KML.xml file.</p>
  
  <p>I want to have it so when you click a placemark from the sidebar, or on the map itself, the map will auto center on the placemark and also zoom in.</p>
  
  <p>Heres the HTML and Script I have so far,</p>
  
  <p>HTML:
      
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Test Map&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="map"&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
          &lt;div id="side_bar"&gt;
              &lt;h3&gt;Locations&lt;/h3&gt;
              &lt;div id="sidebar"&gt;&lt;/div&gt;
              &lt;p&gt;*Click to show location on map&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWj4S3HGnCZ2ZzlRg4bfb4Z7HcpJ82tl8&amp;"&gt;&lt;/script&gt;
      &lt;script src="js/map.js"&gt;&lt;/script&gt;
      &lt;script src="js/geoxml3.js"&gt;&lt;/script&gt;
      &lt;!-- jQuery --&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>// When the window has finished loading create our google map below
      google.maps.event.addDomListener(window, 'load', initialize);
  
  var geoXml = null;
  var geoXmlDoc = null;
  var map = null;
  var myLatLng = null;
  var myGeoXml3Zoom = false;
  var sidebarHtml = "";
  var infowindow = null;
  var kmlLayer = null;
  var filename = "test.kml.xml";
  
      function initialize() {
        myLatLng = new google.maps.LatLng(52.60426, 1.72764);
        // these set the initial center and zoom for the map
        // if it is not specified in the query string
        var lat = 52.60426;
        var lng = 1.72764;
        var zoom = 16;
  
        if (!isNaN(lat) &amp;&amp; !isNaN(lng)) {
          myLatLng = new google.maps.LatLng(lat, lng);
        }
                  var myOptions = {
                      zoom: zoom,
                      center: myLatLng,
                      streetViewControl: false,
                      mapTypeControl: false,
                      zoomControl: true,
                      // How you would like to style the map.
                      // This is where you would paste any style found on Snazzy Maps.
                      styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]}]
                      // zoom: 16,
                      // center: myLatlng,
                  };
                  map = new google.maps.Map(document.getElementById("map"),
                        myOptions);
                  infowindow = new google.maps.InfoWindow({});
  
     geoXml = new geoXML3.parser({
                      map: map,
                      infoWindow: infowindow,
                      singleInfoWindow: true,
                      zoom: myGeoXml3Zoom,
                      afterParse: useTheData
                  });
                  geoXml.parse(filename);
          };
  
  function kmlClick(pm) {
     if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
        google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click");
     } else {
        geoXmlDoc.placemarks[pm].marker.setMap(map);
        google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click");
     }
  }
  
  // == builds the sidebar ==
  
  function makeSidebarEntry(i) {
    var name = geoXmlDoc.placemarks[i].name;
     if (!name  || (name.length == 0)) name = "marker #"+i;
     // alert(name);
     sidebarHtml += '&lt;tr id="row'+i+'"&gt;&lt;td&gt;&lt;img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /&gt;&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:kmlClick('+i+');"&gt;'+name+'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';
  }
  
  function makeSidebar() {
    sidebarHtml = '&lt;table&gt;&lt;tr&gt;&lt;/tr&gt;';
    var currentBounds = map.getBounds();
  // if bounds not yet available, just use the empty bounds object;
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  if (geoXmlDoc) {
    for (var i=0; i&lt;geoXmlDoc.placemarks.length; i++) {
      if (geoXmlDoc.placemarks[i].marker) {
        if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
           makeSidebarEntry(i);
        }
      }
    }
  }
    sidebarHtml += "&lt;/table&gt;";
    document.getElementById("sidebar").innerHTML = sidebarHtml;
  }
  
  function useTheData(doc){
    var currentBounds = map.getBounds();
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
    // Geodata handling goes here, using JSON properties of the doc object
    sidebarHtml = '&lt;table&gt;&lt;tr&gt;&lt;/tr&gt;';
  //  var sidebarHtml = '&lt;table&gt;';
    geoXmlDoc = doc[0];
    for (var i = 0; i &lt; geoXmlDoc.placemarks.length; i++) {
      // console.log(doc[0].markers[i].title);
      var placemark = geoXmlDoc.placemarks[i];
      if (placemark.marker) {
        if (currentBounds.contains(placemark.marker.getPosition())) {
           makeSidebarEntry(i);
        }
      }
  
  /*    doc[0].markers[i].setVisible(false); */
    }
    sidebarHtml += "&lt;/table&gt;";
    document.getElementById("sidebar").innerHTML = sidebarHtml;
  };
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>