D3 Examples - Map Markers

xxxxxxxxxx
 
<!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>
​
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="map-marker.js"></script>
<script>
"use strict";
​
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;});
​
  window.i = setInterval(function() {
    data[0].longitude = data[0].longitude - 20;
    marker_divs
        .filter(function(d, i) {return i==0;})
        .style('opacity', 0.6)
      .transition().duration(1000).ease('linear')
        .call(wrapMarker)
      .each('end', function() {d3.select(this).style('opacity', 1.0);});
  }, 1300);
​
  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>
​
    