map.html

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="map" style="width: 800px; height: 680px;"></div>
<script type="text/javascript">
function dateFormat(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var w = date.getDay();
var wNames = ['日', '月', '火', '水', '木', '金', '土'];

m = ('0' + m).slice(-2);
d = ('0' + d).slice(-2);

return y + '年' + m + '月' + d + '日 (' + wNames[w] + ')';
}


  function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
  }

  var data = new Array();

  $.ajax({
    url: "gpshistory.json",
  }).success(function(res){
    hist=JSON.parse(res)
    hist.sort(function(a,b) {
      return (a.date < b.date ? 1 : -1);
    });
    var myMap = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(hist[0].latitude,hist[0].longitude),
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });
    hist.forEach(function(s){
      console.log(s)
      data.push({position: new google.maps.LatLng(s.latitude, s.longitude),
        content: "<img src='" +s.src+ "' height=150>"  +"<div>"  + dateFormat(new Date(s.date)) +"</div>"
      });
      for (i = 0; i < data.length; i++) {
        var myMarker = new google.maps.Marker({
          position: data[i].position,
          map: myMap,
          icon: new google.maps.MarkerImage(
             s.icon,
            new google.maps.Size(31,31),
            new google.maps.Point(0,0),
            new google.maps.Point(16,16)
          )
        });
        attachMessage(myMarker, data[i].content);
      }
    })
  }).error(function(data){
      alert('error!!!');
  });





</script>