Map Icons

by Ryan

HTML

<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://mbostock.github.com/d3/d3.js?1.29.1"></script>
<div id="map"></div>

CSS

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

.bubbles, .bubbles svg {
  position: absolute;
}
 
.bubbles svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}
 
.bubbles circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

JavaScript

var data = [ { lat: 39.239331, long: -76.771442 },
             { lat: 39.233777, long: -76.770122 },
             { lat: 39.234043, long: -76.779692 },
             { lat: 39.236968, long: -76.783597 } ];

var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 14,
  center: new google.maps.LatLng(39.239231,-76.773673),
  mapTypeId: google.maps.MapTypeId.HYBRID
});

var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "bubbles");
    
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;
 
      var marker = layer.selectAll("svg")
          .data(data)
          .each(transform) // update existing markers
        .enter().append("svg:svg")
          .each(transform)
          .attr("class", "marker");
 
      // Add a circle.
      marker.append("svg:circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding);
 
      function transform(d) {
          d = new google.maps.LatLng(d.lat, d.long);
          d = projection.fromLatLngToDivPixel(d);
          return d3.select(this)
              .style("left", (d.x - padding) + "px")
              .style("top", (d.y - padding) + "px");
      }
}