Map Markers

A MapMarker widget for Google Maps API markers. Transitions are smooth even while zooming.

<!doctype html>
<meta charset="utf-8">
<style>
html, body, #map-canvas {height: 100%; width: 100%;}
.marker {
  position:relative;
}
.marker-container {
  position:relative;
  left:-50%;
}
.marker-dot {
  display:block;
  position:relative;
  width: 8px;
  height: 8px;
  left: 50%;
  margin-left: -4px;
  border-radius: 6;
  background-color: red;
}
.marker-label {
  display:block;
  position:relative;
  padding: 2px;
  margin:2px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius:2px;
  text-align:center;
  white-space:nowrap;
}
</style>
<body>
<div id="map-canvas">
</div>
</body>

function initializeMap() {
  var mapOptions = {
    center: new google.maps.LatLng(10, 0),
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

// hack to get easy access to projection
  // from https://stackoverflow.com/questions/1538681/
  var overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);
  var proj = function() {
    return overlay.getProjection();
  };

var data = [
    {name: 'Point A', latitude: -20, longitude: 20},
    {name: 'Point B', latitude: -1, longitude: 40},
  ];

var path1 = [
    {lat: 38.895, lng: -77.036, dest: 'Washington'},
    {lat: 51.507, lng: -0.127, dest: 'London'},
    {lat: 12.967, lng: 77.567, dest: 'Bangalore'},
    {lat: 39.914, lng: 116.391667, dest: 'Beijing'}
  ];

data[1].latitude = path1[0].lat;
  data[1].longitude = path1[0].lng;

var wrapMarker = MapMarker().gmap(map);

var marker_divs = d3.select('#map-canvas').selectAll('div.marker').data(data);
  var new_markers = marker_divs.enter()
      .append('div')
      .attr('class', 'marker')
      .call(wrapMarker)
    .append('div')
      .attr('class', 'marker-container');

new_markers
    .append('div')
      .attr('class', 'marker-dot');

new_markers
    .append('div')
      .attr('class', 'marker-label')
      .html(function(d) {return d.name;});

var t = 0;
  setInterval(function() {
    t += 1;
    var leg = path1[t % path1.length];
    data[1].latitude = leg.lat;
    data[1].longitude = leg.lng;
    data[1].dest = leg.dest;
    var md = marker_divs.filter(function(d, i) {return i==1;});

md.selectAll('div.marker-label')
        .html(function(d) {return d.name + '<br />(to ' + d.dest + ')';});
    md.transition().duration(4500).ease('linear')
        .call(wrapMarker);
  }, 5000);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://maps.googleapis.com/maps/api/js?sensor=false

https://d3js.org/d3.v3.min.js