Home/ Questions/Q 3228200
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:39:51+00:00

Is there any way to create a sidebar from a KML file when using

  • 0

Is there any way to create a “sidebar” from a KML file when using the Google Maps API?

I’m loading the markers on the map using something like this:

var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml');

This works great so far, but how can I grab that data and loop through the points?

I would like to avoid using a third party library, if possible- although jQuery is OK.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    KML is just an XML document so you can just process it using jQuery to extract the data you need. You can store the coordinates and placenames in a local array and use this data for any purpose you want eg. you can use it to navigate to a point on the map when a person clicks on a place name on a sidebar.

    Below is an example on how to process the KML file and implement the navigation based on the data in the file..One word of caution I would not do this with large KML files as it doubles the load time (browser has to load the file to process the features)…

    <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="../js/jquery-1.4.2.min.js">
</script>
<script>
    var map;
    var nav = [];
    $(document).ready(function(){
        //initialise a map
        init();

        $.get("kml.xml", function(data){

            html = "";

            //loop through placemarks tags
            $(data).find("Placemark").each(function(index, value){
                //get coordinates and place name
                coords = $(this).find("coordinates").text();
                place = $(this).find("name").text();
                //store as JSON
                c = coords.split(",")
                nav.push({
                    "place": place,
                    "lat": c[0],
                    "lng": c[1]
                })
                //output as a navigation
                html += "<li>" + place + "</li>";
            })
            //output as a navigation
            $(".navigation").append(html);

            //bind clicks on your navigation to scroll to a placemark

            $(".navigation li").bind("click", function(){

                panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)

                map.panTo(panToPoint);
            })

        });

        function init(){


            var latlng = new google.maps.LatLng(-43.552965, 172.47315);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);



        }


    })
</script>
<html>
    <body>
        <div id="map" style="width:600px;height: 600px;">
        </div>
        <ul class="navigation">
        </ul>
    </body>
</html>
    • 0