typeofgraphic/mapD3JsonGeocode.html

## mapD3JsonGeocode.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <style type="text/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;
}

    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

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

//geocoding
var geocoder = new google.maps.Geocoder();
var d3pos = { };

// Load the station data. When the data comes back, create an overlay.
d3.json("countryCityTimeAlt.json", function(data) {
  var overlay = new google.maps.OverlayView();

  // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

    // Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    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(geo)
          .each(transform)
          .attr("class", "marker");

      // Add a circle.
      marker.append("svg:circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding);

      // Add a label.
      marker.append("svg:text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.count; });

  function geo(d) {
	  geocoder.geocode( { 'address': d.city}, function(results, status) {
         		if (status == google.maps.GeocoderStatus.OK) {
           			var point = {
                	position: results[0].geometry.location
            		};

            		d3pos = { 	lat: point.position.Ya,
            					lon : point.position.Za
            				};

            		console.log(d3pos.lat, d3pos.lon)
            		return d3pos

          		} else {
            		alert('Geocode was not successful for the following reason: ' + status);
          		}
        	});
        }
        console.log(d3pos.lat, d3pos.lon);

      function transform(d) {
        d = new google.maps.LatLng(d3pos.lat, d3pos.lon)
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");

      }
    };
  };

  // Bind our overlay to the map…
  overlay.setMap(map);
});

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<style type="text/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;
	}

	</style>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">

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

	//geocoding
	var geocoder = new google.maps.Geocoder();
	var d3pos = { };

	// Load the station data. When the data comes back, create an overlay.
	d3.json("countryCityTimeAlt.json", function(data) {
	var overlay = new google.maps.OverlayView();

	// Add the container when the overlay is added to the map.
	overlay.onAdd = function() {
	var layer = d3.select(this.getPanes().overlayLayer).append("div")
	.attr("class", "stations");

	// Draw each marker as a separate SVG element.
	// We could use a single SVG, but what size would it have?
	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(geo)
	.each(transform)
	.attr("class", "marker");

	// Add a circle.
	marker.append("svg:circle")
	.attr("r", 4.5)
	.attr("cx", padding)
	.attr("cy", padding);

	// Add a label.
	marker.append("svg:text")
	.attr("x", padding + 7)
	.attr("y", padding)
	.attr("dy", ".31em")
	.text(function(d) { return d.count; });

	function geo(d) {
	geocoder.geocode( { 'address': d.city}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var point = {
	position: results[0].geometry.location
	};

	d3pos = { lat: point.position.Ya,
	lon : point.position.Za
	};

	console.log(d3pos.lat, d3pos.lon)
	return d3pos

	} else {
	alert('Geocode was not successful for the following reason: ' + status);
	}
	});
	}
	console.log(d3pos.lat, d3pos.lon);

	function transform(d) {
	d = new google.maps.LatLng(d3pos.lat, d3pos.lon)
	d = projection.fromLatLngToDivPixel(d);
	return d3.select(this)
	.style("left", (d.x - padding) + "px")
	.style("top", (d.y - padding) + "px");

	}
	};
	};

	// Bind our overlay to the map…
	overlay.setMap(map);
	});

	</script>
	</body>
	</html>