Google Maps API & geoxml 3 - Zoom to placemark on click/Center placemark on map

Question

UPDATED SCRIPT - with click and zoom/center

Still not quite right, first click shows infoWindow put does not zoom/center

// 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) && !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 += '<tr id="row'+i+'"><td><img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /></td><td><a href="javascript:kmlClick('+i+');">'+name+'</a></td></tr>';
}

function makeSidebar() {
  sidebarHtml = '<table><tr></tr>';
  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<geoXmlDoc.placemarks.length; i++) {
    if (geoXmlDoc.placemarks[i].marker) {
      if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
         makeSidebarEntry(i);
      }
    }
  }
}
  sidebarHtml += "</table>";
  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 = '<table><tr></tr>';
//  var sidebarHtml = '<table>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < 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 += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

XML:

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
    <Document>
        <name>Map</name>
        <description></description>
        <Folder>
            <name>Points</name>
            <Placemark>
                <name>Placemark 1</name>
                <description>Description</description>
                <styleUrl>#icon-1239</styleUrl>
                <Point>
                    <coordinates>1.7275818,52.6043317,0.0</coordinates>
                </Point>
            </Placemark>
            <Placemark>
                <name>Placemark 2</name>
                <description>Description</description>
                <styleUrl>#icon-1279</styleUrl>
                <Point>
                    <coordinates>1.73041,52.60436,0.0</coordinates>
                </Point>
            </Placemark>
        </Folder>
        <Style id='icon-1239'>
            <IconStyle>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/1239-poi-civic.png</href>
                </Icon>
            </IconStyle>
        </Style>
        <Style id='icon-1279'>
            <IconStyle>
                <scale>1.1</scale>
                <Icon>
                    <href>http://www.gstatic.com/mapspro/images/stock/1279-poi-library.png</href>
                </Icon>
            </IconStyle>
        </Style>
    </Document>
</kml>

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.

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.

Heres the HTML and Script I have so far,

HTML:

<head>
    <title>Test Map</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>

    <div class="map">
        <div id="map"></div>
        <div id="side_bar">
            <h3>Locations</h3>
            <div id="sidebar"></div>
            <p>*Click to show location on map</p>
        </div>
    </div>

    <!-- Scripts -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWj4S3HGnCZ2ZzlRg4bfb4Z7HcpJ82tl8&"></script>
    <script src="js/map.js"></script>
    <script src="js/geoxml3.js"></script>
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

</body>

Script:

// 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) && !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 += '<tr id="row'+i+'"><td><img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /></td><td><a href="javascript:kmlClick('+i+');">'+name+'</a></td></tr>';
}

function makeSidebar() {
  sidebarHtml = '<table><tr></tr>';
  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<geoXmlDoc.placemarks.length; i++) {
    if (geoXmlDoc.placemarks[i].marker) {
      if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
         makeSidebarEntry(i);
      }
    }
  }
}
  sidebarHtml += "</table>";
  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 = '<table><tr></tr>';
//  var sidebarHtml = '<table>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < 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 += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

Any help would be greatly appreciated.

Which version of geoxml3 are you using (polys or kmz branch)? Can you provide a sample of the KML file you are using for test? Is it just markers? Or Markers, Polygons, Polylines, etc.? — geocodezip, Apr 15 '16 at 15:22
I think its the polys version, I have added the KML file to my original post. It will only be placemarkers — Nathan, Apr 15 '16 at 15:35

geocodezip · Accepted Answer · 2021-01-07T20:20:13.003

To center the map on a marker clicked on the sidebar, add code to do that to the function that is called (kmlClick):

function kmlClick(pm) {
  // center the map on the marker and change the zoom to 18
  if (geoXml.docs[0].placemarks[pm].marker.getPosition){
     map.setCenter(geoXml.docs[0].placemarks[pm].marker.getPosition());
     map.setZoom(19);
  }
     
  if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
    // if map is not null (marker is on the map), trigger a click on it
     google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click");
  } else {
    // if map is null (marker is not on the map), add it to the map,
    // then trigger a click on it
    geoXmlDoc.placemarks[pm].marker.setMap(map);
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click");
  }
}

If you want it to center and zoom when the marker is clicked or the click is triggered from the sidebar, put that functionality in the marker click listener. One way to do that would be to add a marker click listener to the markers in useTheData:

function useTheData(doc){
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  sidebarHtml = '<table><tr></tr>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
    var placemark = geoXmlDoc.placemarks[i];
    if (placemark.marker) {
      google.maps.event.addListener(placemark.marker,'click',function(evt) {
        this.getMap().setCenter(this.getPosition());
        this.getMap().setZoom(19);
      });
      if (currentBounds.contains(placemark.marker.getPosition())) {
         makeSidebarEntry(i);
      }
    }
  }
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

proof of concept

code snippet:

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 = "kml/SO_20160415_placemarks.kml";

function initialize() {
  myLatLng = new google.maps.LatLng(52.60426, 1.72764);
  var lat = 52.60426;
  var lng = 1.72764;
  var zoom = 16;

  if (!isNaN(lat) && !isNaN(lng)) {
    myLatLng = new google.maps.LatLng(lat, lng);
  }
  var myOptions = {
    zoom: zoom,
    center: myLatLng,
    streetViewControl: false,
    mapTypeControl: false,
    zoomControl: true
  };
  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.parseKmlString(kmlStr);
  google.maps.event.addListener(map, "bounds_changed", makeSidebar);
  google.maps.event.addListener(map, "center_changed", makeSidebar);
  google.maps.event.addListener(map, "zoom_changed", makeSidebar);
  google.maps.event.addListenerOnce(map, "idle", makeSidebar);
};

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");
  }
}

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;
  sidebarHtml += '<tr id="row' + i + '"><td><img src=' + geoXmlDoc.placemarks[i].style.href + ' height="20" alt="icon" /></td><td><a href="javascript:kmlClick(' + i + ');">' + name + '</a></td></tr>';
}

function makeSidebar() {
  sidebarHtml = '<table><tr></tr>';
  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 < geoXmlDoc.placemarks.length; i++) {
      if (geoXmlDoc.placemarks[i].marker) {
        if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
          makeSidebarEntry(i);
        }
      }
    }
  }
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
}

function useTheData(doc) {
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds = new google.maps.LatLngBounds();
  sidebarHtml = '<table><tr></tr>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
    var placemark = geoXmlDoc.placemarks[i];
    if (placemark.marker) {
      google.maps.event.addListener(placemark.marker, 'click', function(evt) {
        this.getMap().setCenter(this.getPosition());
        this.getMap().setZoom(19);
      });

      if (currentBounds.contains(placemark.marker.getPosition())) {
        makeSidebarEntry(i);
      }
    }
  }
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

var kmlStr = "<?xml version='1.0' encoding='UTF-8'?><kml xmlns='http://www.opengis.net/kml/2.2'><Document><name>Map</name><description></description><Folder><name>Points</name><Placemark><name>Placemark 1</name><description>Description</description><styleUrl>#icon-1239</styleUrl><Point><coordinates>1.7275818,52.6043317,0.0</coordinates></Point></Placemark><Placemark><name>Placemark 2</name><description>Description</description><styleUrl>#icon-1279</styleUrl><Point><coordinates>1.73041,52.60436,0.0</coordinates></Point></Placemark></Folder><Style id='icon-1239'><IconStyle><scale>1.1</scale><Icon><href>http://www.gstatic.com/mapspro/images/stock/1239-poi-civic.png</href></Icon></IconStyle></Style><Style id='icon-1279'><IconStyle><scale>1.1</scale><Icon><href>http://www.gstatic.com/mapspro/images/stock/1279-poi-library.png</href></Icon></IconStyle></Style></Document></kml>";

html,
body,
#map,
.map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="map">
  <div id="side_bar">
    <h3>Locations</h3>
    <div id="sidebar"></div>
    <p>*Click to show location on map</p>
  </div>
  <div id="map"></div>
</div>

Thanks this works perfectly for a marker clicked on the sidebar, is there a way so that it works the same for markers which are on the map itself? — Nathan, Apr 15 '16 at 21:00
Sure. Simplest would be to do the center and zoom in the click listener, the just trigger the click in the sidebar. — geocodezip, Apr 15 '16 at 21:17
thanks working perfectly now! slightly off topic but is there anyway to change the zoom so it gradually zooms in rather than changing straight to 19? — Nathan, Apr 16 '16 at 11:20

score 0 · Answer 2 · answered Apr 15 '16 at 11:11

0

Test to change your function makeSidebar() as:

function makeSidebar() {
  sidebarHtml = '<table><tr></tr>';
  var currentBounds = map.getBounds();
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
if (geoXmlDoc) {
  for (var i=0; i<geoXmlDoc.placemarks.length; i++) {
    if (geoXmlDoc.placemarks[i].marker) {
  if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
     makeSidebarEntry(i);

        google.maps.event.addListener(geoXmlDoc.placemarks[i].marker, "click", function (e) {
            map.setZoom(16);
            //infoWindow.open(map, marker);

            map.setCenter(marker.getPosition());
        });
  }
}
  }
}

answered Apr 15 '16 at 11:11

Beldi Anouar

2,170
1
12
17

Thanks for your answer, I've tried the above but it does not change the zoom when clicking on a placemark or from the sidebar – Nathan Apr 15 '16 at 11:24
The links in the side bar use the javascript function: kmlClick(i) if that helps at all? – Nathan Apr 15 '16 at 11:30
Try to change your function Kmlclick as : – Beldi Anouar Apr 15 '16 at 11:32

score 0 · Answer 3 · answered Apr 15 '16 at 11:33

0

Try to change your function Kmlclick as :

 function kmlClick(pm) {
    google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) {
                    map.setZoom(16);
                    //infoWindow.open(map, marker);

                    map.setCenter(marker.getPosition());
                });
       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");
       }
    }

The approch is when you create your mark in map you must add a listner to it "click" i hop that help you

answered Apr 15 '16 at 11:33

Beldi Anouar

2,170
1
12
17

Hi thanks again, definitely heading in the right direction! Slight problem, when clicking on the Placemarker (on the map) it does not zoom in, however if I click using the sidebar it does. Strangely if i click the sidebar first to zoom in I can them use the placemarker on the map to zoom in. The centering still isn't working, the map moves to show the place marker but it is on the edge of the map, can we change this to centre of the map? – Nathan Apr 15 '16 at 11:47
I'm getting a ReferenceError: Can't find variable: marker - links to the map.setCenter(marker.getPosition()); – Nathan Apr 15 '16 at 11:59

score 0 · Answer 4 · answered Apr 15 '16 at 12:19

I've managed to get the centring and zoom almost working, with the help of @BLD_Sys

function kmlClick(pm) {
    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());
                });
       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");
       }
    }

I had to add the geoXML.docs[0].placemarks[pm] bit because it was returning a Reference Error using just marker.getPosition()

Im still having an issue with it only working if you click the sidebar first and not if you click the placemarker on the map first.

Beldi Anouar · Answer 5 · 2016-04-15T14:07:49.817

0

test to move the code after your test as :

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

Tell me if he work for you and thank to mark vote in answer .

edited Apr 15 '16 at 14:07

answered Apr 15 '16 at 13:59

Beldi Anouar

2,170
1
12
17

Its still not quite right, heres a link to a the live version [link](http://www.atecdesign.co.uk/Great%20Yarmouth%20-%20Tourist%20Map/test.html) It seems like there is a class which isn't added until the link from the sidebar is clicked? – Nathan Apr 15 '16 at 14:36
If you can post your code after the update for localising where is the probleme – Beldi Anouar Apr 15 '16 at 14:46
Ive updated my post with the current script. Thanks for your help so far, its close just not quite right! – Nathan Apr 15 '16 at 14:52

score 0 · Answer 6 · answered Apr 15 '16 at 15:18

I try to test this code in my machine but i don't have "test.kml.xml"; any way you try to change your function useTheData as :

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 = '<table><tr></tr>';
//  var sidebarHtml = '<table>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < 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);
 google.maps.event.addListener(placemark.marker, "click", function (e) {
        map.setZoom(19);
        //infoWindow.open(map, marker);

        map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition());

      }
    }

/*    doc[0].markers[i].setVisible(false); */
  }
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};

I hope that this is one is the best

Using the above I just get a blank screen with the sidebar (without the marker titles) - I will add a copy of my xml for testing — Nathan, Apr 15 '16 at 15:32

Google Maps API & geoxml 3 - Zoom to placemark on click/Center placemark on map

6 Answers6