Playing with google maps

index.html

<div id="map"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

Playing with google maps.markdown

Playing with google maps

A Pen by Andrei R. Akhmetzhanov on CodePen.

License.

script.js

// from http://bl.ocks.org/mbostock/899711

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  center: new google.maps.LatLng(24.9459433, 121.7226891)
});

$.ajax({
   type: "GET",
   url: "https://dl.dropboxusercontent.com/u/938018/CH3-akhmetzhanov-20160522.gpx",
   dataType: "xml",
   success: function(xml) {
     var points = [];
     var bounds = new google.maps.LatLngBounds ();
     $(xml).find("trkpt").each(function() {
       var lat = $(this).attr("lat");
       var lon = $(this).attr("lon");
       var p = new google.maps.LatLng(lat, lon);
       points.push(p);
       bounds.extend(p);
     });

     var poly = new google.maps.Polyline({
       // use your own style here
       path: points,
       strokeColor: "#FF00AA",
       strokeOpacity: .9,
       strokeWeight: 1.5
     });

     poly.setMap(map);

     // fit bounds to track
     map.fitBounds(bounds);
   }
  });

style.css

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}