I am working with a code snippet that integrates a google map and appends a layer over it. However, I have encountered an issue with the projection causing an error and preventing the layer from displaying on the google map alone. Any assistance in resolving this problem would be greatly appreciated. It's worth noting that I am utilizing version 4 of d3. Do you have any suggestions?
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 7,
center: new google.maps.LatLng(31.5852,36.2384),
mapTypeId: google.maps.MapTypeId.ROADMAP });
d3.json("Export.json", function(error, jordanLevel2) {
if (error) throw error
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div");
overlay.draw = function() {
layer.select('svg').remove();
var w = 900;
var h = 900;
var overlayProjection = this.getProjection();
// Turn the overlay projection into a d3 projection
var googleMapProjection = function(coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x, pixelCoordinates.y];
}
var path = d3.geoPath().projection(googleMapProjection);
var svg = layer.append("svg")
.attr('width', w)
.attr('height', h)
var g = svg.append('g')
.attr("id", "mapGroup");
g.selectAll("path")
.data(jordanLevel2.features)
.enter()
.append("path")
.attr("d", path)
.attr('class', 'state selected')
.style('opacity', .7);
}
}
overlay.setMap(map);
});