xxxxxxxxxx<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;}.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; opacity: .5} div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; pointer-events: none; }</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>// 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});// Load the station data. When the data comes back, create an overlay.d3.csv("echteMega.csv", function(error, data) { if (error) throw error; 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") .each(transform) .attr("class", "marker"); // Add a circle. marker.append("circle") .data(data) .enter() .attr("r", 4.5) .attr("cx", padding) .attr("cy", padding); .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div.html(formatTime(d.date) + "<br/>" + d.close) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }); // Add a label. marker.append("text") .attr("x", padding + 7) .attr("y", padding) .attr("dy", ".31em") .text(function(d) { return d.population; }); function transform(d) { //console.log(d); latlng = d.location; latlng = latlng.split(",") lat = +latlng[0] lng = +latlng[1] //console.log("lat:", lat, "lng:", lng); d = new google.maps.LatLng(lat,lng); //console.log("d:", d) d = projection.fromLatLngToDivPixel(d); // console.log("d:", 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> https://maps.google.com/maps/api/js?sensor=true
https://d3js.org/d3.v4.min.js