JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<div id="map"></div>
<div id="sidebar">
  <h2>Sidebar</h2>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

JavaScript

window.onload=function() {
     
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
     var infowindow = new google.maps.InfoWindow();
     var markers = [];

    var marker, i;
    
    // read xml
    $.ajax({
            type: "GET",
            url: "example.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('site').each(function(){
                    var title = $(this).find('title').text();
                    var url = $(this).find('url').text();
                    var desc = $(this).find('desc').text();
                    var lon = $(this).find('lon').text();
                    var lat = $(this).find('lat').text();
                    
                    //console.log(lon);
                    //console.log(lat);
            
            
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(lon,lat),
            map: map,
            icon: "http://lindsay-and-dan.gettingmarried.co.uk/images/maps/icon-music.gif" 
          });
          
         
          //console.log(markers.length-1);
          
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(desc);
          infowindow.open(map, marker);
        }
          })(marker, i));
          
         markers.push(marker);
            
                    
        $('<div class="item"></div>').html('<h2>'+ title + '</h2><p>'+ desc + '</p><a onclick="findMarker();" href="#">Book Now</a>').appendTo('#sidebar');
                    
                });
            }
    }); 
    
    
}
    

    
function findMarker(){

//google.maps.event.trigger(i, 'click');
//infowindow.open(map, i);

map.setCenter(marker.position());

return false;

}