fresh block 2

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

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

#markerLayer circle {
  animation: pulse .5s infinite alternate;
  -webkit-animation: pulse .5s infinite alternate;
  transform-origin: center;
  -webkit-transform-origin: center;
}  
  
#map {
  width: 100%;
  height: 10%;
  margin: 0;
  padding: 0;
}
 
#heure {
  width: 100%;
  height: 10%;
  margin-top: 0px;
  padding: 0;
}  
  #test{ width: 100%; height: 80%; margin: 0; padding: 0;} 
  
.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width: 600px;
  height: 200px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  //fill: brown;
  //stroke: black;
  //stroke-width: 1.5px;
}
.dataset-button {
	padding: 6px 0 6px 0;
	font:Bold 13px Arial;
	background:#fafafa;
	color:#555;
  border-right: 1px solid fafafa;
  border-radius: 50%;
	width:40px;
  height:40px;
}

</style>
<select id="map"></select>

<div id="test"></div>
<div id="heure"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
 
  var bounceTimer;
var radius = d3.scaleSqrt()
    .domain([0, 2500])
    .range([2, 18]);
    
var colorScale = d3.scaleLinear()
    .domain([0, 2500])
    .range(["#c8e1ee", "#317ca4"]);
 
var marker=[];
var map = new google.maps.Map(d3.select("#test").node(), {
          zoom: 14,
          center: {lat: -37.8090000, lng: 144.9633200},
          styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
        });

/* 
        Because of the google maps bug of moving cursor several times over and out of marker
        causes bounce animation to break - we use small timer before triggering the bounce animation
        */

clearTimeout(bounceTimer);

var that = this;

bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        200);

}
      });
  
  marker[k].addListener('mouseout', function() {
        if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

// If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);
      });
  
      }
  });});
      }
      
  function test2(h,date){
                      d3.csv("November_2017.csv", function(sensor) { 
  d3.csv("Pedestrian_sensor_locations.csv", function(data) {
         var date2=0;
    for (i=1;i<sensor.length;i++){
      if (sensor[i].Date==date){date2=i}
    }
for(k in data){
  marker[k].setMap(null)
  var latLng = new google.maps.LatLng(data[k].Latitude,data[k].Longitude)
  
  		      var whiteCircle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 0.5,
    fillColor: colorScale(sensor[h+date2][data[k]["Sensor Description"]]),
    strokeOpacity: 0.2,
    strokeColor: "white",
    strokeWeight: 1.0,
    scale: 1.5*radius(sensor[h+date2][data[k]["Sensor Description"]])
};
        marker[k] = new google.maps.Marker({
          map: map,
          icon: whiteCircle,
          //animation: google.maps.Animation.DROP,
          position: latLng
        });
        marker[k].addListener('mouseover', function() {
        if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

clearTimeout(bounceTimer);

var that = this;

bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        200);

}
      });
  
  marker[k].addListener('mouseout', function() {
        if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

// If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);
      });
  
      }
  });});
  }

curh=10
curd="03/11/2017"
affichage2(curh,curd)

datasets = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
  var datasetpicker = d3.select("#heure").selectAll(".dataset-button")
        .data(datasets);

datasetpicker.enter()
        .append("input")
        .attr("value", function(d){ return d+"h" })
        .attr("type", "button")
        .attr("class", "dataset-button")
        .on("click", function(d) {
          test2(d,curd);
        	curh=d;
        console.log(d)
        });

d3.csv("November_2017.csv", function(data) { 
  
  var menu = d3.select("#map")
    .on("change", function() {
          test2(curh,this.value);
        	curd=this.value;
      console.log(this.value)
        });

menu.selectAll("option")
    .data(d3.map(data, function(d){return d.Date;}).keys())
    .enter()
    .append("option")
    .text(function(d){return d;});
  
})
</script>

https://maps.googleapis.com/maps/api/js?v=3.exp

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