Generic Google Map Example with Markers

by hongyang1033

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

h1,
p {
  margin: 0;
  padding: 0;
}

JavaScript

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function() {

  var jsonString = '{"trip1":{"guide":"jason","date":"12 Jan 2015","description":"AAAAAAAAAAAAAAAAAAAAAAAAAAAA","stops":"0","places":[{"lat":"-33.890542","lng":"151.274856"},{"lat":"-32.8426736319543","lng":"148.24951171875"}]},"trip2":{"guide":"asshole","date":"12 Jan 2015","description":"AAAAAAAAAAAAAAAAAAAAAAAAAAAA","stops":"1","places":[{"lat":"-31.428663117358596","lng":"152.90771484375"},{"lat":"-35.29943548054544","lng":"149.1064453125"},{"lat":"-36.08462129606931","lng":"146.953125"}]}}';
  var myData = JSON.parse(jsonString);


  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: new google.maps.LatLng(-33.890542, 151.274856),
    disableDefaultUI: true

  });
  directionsDisplay.setMap(map);
  /*        
            for(var x in myData)
            {
                var position = new google.maps.LatLng(myData[x].places[0].lat,myData[x].places[0].lng);
                var marker = new google.maps.Marker({
                  position: position,
                  map: map
                });
                google.maps.event.addListener(marker, 'mouseover', function(){
                				calculateAndDisplayRoute(directionsService, directionsDisplay, myData[x]);
                });
                
                google.maps.event.addListener(marker, 'mouseout', function(){
               					directionsDisplay.setDirections({routes: []});
                        console.log("Mouseout Working");
                });
                
            }*/

  var marker;


  for (var x in myData) {
    var position = new google.maps.LatLng(myData[x].places[0].lat, myData[x].places[0].lng);
    marker = new...