PROJECT

<!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;
}

</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>";
        
        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