Initially, to highlight my polygon in this case, I implemented the following code snippet: Highlight polygon and tint rest of map using Google Maps
Below is the Angular code I utilized:
var boundaries = [];
// defining a large area
var overlay = [
new $rootScope.googleApi.LatLng(80.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, -90.0),
new $rootScope.googleApi.LatLng(-60.0, 90.0),
new $rootScope.googleApi.LatLng(80.0, 90.0)
];
// creating my polygon
angular.forEach(settings_boundaries, function(val, key) {
boundaries.push(new $rootScope.googleApi.LatLng(val[1], val[0]));
});
// constructing a polygon with overlay initially
var poly = new $rootScope.googleApi.Polygon({
paths: [overlay, boundaries],
strokeColor: "blue",
strokeWeight: "1",
fillColor: "black",
fillOpacity: 0.4,
clickable: false
});
poly.setMap(interactiveMap);
The main issue now lies in, When I employ these coordinates (which I don't recall where I obtained originally):
[[1.6101837158203125,49.00274483644452],
[1.6294097900390625,49.01175312475694],
[1.5947341918945312,48.98787759766659],
[1.6101837158203125,49.00274483644452]]
Everything functions correctly (as depicted here).
However, if I use these set of coordinates instead:
[[1.6809940338134766,48.98337149775796],
[1.6791915893554688,48.96849847697763],
[1.7185020446777344,48.995199140974066],
[1.6809940338134766,48.98337149775796]]
This no longer produces the desired outcome.
As seen here.
I employed this website to generate the coordinates :
(refer to screenshot)
I have spent considerable time trying to figure out the root cause of the problem, but it remains elusive. The coordinates are nearly identical. The first lat, lon values match for both cases.
If you have any insights (there might be something unique about the coordinates), I would appreciate your input!
Thank you!