I am using google maps API V3 and I want to create an editable 100px X 100px Rectangle when user clicks on the map.
Now I only need to have (x,y) point that user clicks and then lat and lng of (x+100 , y+100). Any Idea?
This function should create a 100 x100 rectangle around the center(LatLng) that you pass to it.
function setRectangle(center){
var scale = Math.pow(2,map.getZoom());
var proj = map.getProjection();
var wc = proj.fromLatLngToPoint(center);
var bounds = new google.maps.LatLngBounds();
var sw = new google.maps.Point(((wc.x * scale) - 50)/ scale, ((wc.y * scale) - 50)/ scale);
bounds.extend(proj.fromPointToLatLng(sw));
var ne = new google.maps.Point(((wc.x * scale) + 50)/ scale, ((wc.y * scale) + 50)/ scale);
bounds.extend(proj.fromPointToLatLng(ne));
var opts = {
bounds: bounds,
map: map,
editable:true
}
var rect = new google.maps.Rectangle(opts);
}
You can use
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);
now you can get pixels from p.x and p.y
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With