Map id 11 & slider v1

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <style>
    
    .ticks {
      font-size: 10px;
    }

.track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

.track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

.track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }

.track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }

.handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
    
    html, body, #map {
  		width: 100%;
  		height: 90%;
  		margin: 0;
  		padding: 0;
}
  </style>
  <div id="map"></div>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

// Création de la map...
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 16,
  // ...centrée sur l'Id 11
  center: new google.maps.LatLng(45.7742, 4.8677),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

</script>
</head>

<body>
<div id="slider"></div>
<script>
// Échelle de temps de la barre
var formatDateIntoYear = d3.timeFormat("%H:%M");
var formatDate = d3.timeFormat("%d %b %Y");

// L'intervalle concerné
var startDate = new Date("2014-12-07 05:20:23.792"),
    endDate = new Date("2014-12-07 12:10:50.413");

// Mise en forme de la barre
var margin = {top:10, right:50, bottom:400, left:50},
    width = 960 -margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
var svg = d3.select("#slider")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height);
    
var x = d3.scaleTime()
    .domain([startDate, endDate])
    .range([0, width])
    .clamp(true);

var slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");

slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { hue(x.invert(d3.event.x)); }));

slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 18 + ")")
  .selectAll("text")
    .data(x.ticks(10))
    .enter()
    .append("text")
    .attr("x", x)
    .attr("y", 10)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatDateIntoYear(d); });

var label = slider.append("text")  
    .attr("class", "label")
    .attr("text-anchor", "middle")
    .text(formatDate(startDate))
    .attr("transform", "translate(0," + (-25) + ")")

var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 9);

function hue(h) {
  handle.attr("cx", x(h));
  label
    .attr("x", x(h))
    .text(formatDate(h));
  // Change la couleur du fond de la barre pour l'instant, fera apparaitre les coordonnées sur la map par la suite !
  svg.style("background-color", d3.hsl(h/100000, 0.8, 0.8));
}
</script>
</body>

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

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