JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css">
<div id="map_canvas"></div>
<ul class="navigation"></ul>

CSS

html, body, #map_canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;
var nav = [];

$(function() {
   initialize();
    
    $.get("http://www.publivende.net/ser/COSECHA_ISA.kml", 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 initialize() {
    // create the map
    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_canvas"), myOptions);
}