Mega3

forked from swaggernation77's block: Mega

forked from baker4cs's block: Mega2

<!DOCTYPE html>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
p {
    font-family: "Sans-serif", Arial;
    font-size: 18px
}

</style>
<div id="map"></div>
<script>

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

function addMarker(d) {
  console.log("d:", d)
        contentString = "<h1>" + d.population + "</h1>" +
        "<p>" +
        "Location: " + d.location + "<br><br>" +
        "Female color: " + d["F color"] + "<br><br>" +
        "Number: " + d.N + "<br><br>" +
        "Elevation:" + d.Elevation + "<br><br>"
        "</p></font>";
        latlng = d.location;
        latlng = latlng.split(",")
        lat = +latlng[0]
        lng = +latlng[1]
       
        latlng = new google.maps.LatLng(lat,lng);
   			
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

});

</script>

https://maps.google.com/maps/api/js?sensor=true

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