The ideal would be to use Google Maps' own resources and draw the regions instead of placing an image inside.
I created in the Jsfiddle an example.
Basically you define the coordinates of the region that will be drawn the location.
Example of the important part:
var homicidioCoords = [
new google.maps.LatLng(-9.86062814536589, -50.25146484375),
new google.maps.LatLng(-9.384032109601689, -56.75537109375),
new google.maps.LatLng(-12.876069959946493, -57.041015625),
new google.maps.LatLng(-14.477234210156507, -54.0087890625),
new google.maps.LatLng(-13.26133317079826, -50.64697265625),
new google.maps.LatLng(-9.86062814536589, -50.25146484375),
];
// Constrói o desenho.
areaAfetada = new google.maps.Polygon({
paths: homicidioCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
The way out:
With this you can go creating the regions and inserting the colors as you wish. I also put an event to when right-clicking the mouse to show the latitude and longitude of the location. The best way would still be to carry out the whole drawing on the map, and save the coordinates.
As I said, the example is in Jsfiddle an example.
References: Polygon-simple
thanks that’s what I was looking for, I’ll even have to draw the maps. To finish you know some program or site, where I can be uploading the image and click over the points and it returns the JS of the coordinates?
– abcd
@abcd unknown
– Paulo
I searched well, found some... Polygon Creator Class, just modify... ATT
– abcd