Question

I’m trying to let people draw a rectangle on Google Maps and store the bottomLeft and topRight coordinates.

I know I can draw a Rectangle codewise (see: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html#Rectangle), but before i can load the bounds from my DB the people need to define it themself first off course 🙂

So my question is, how can I let people draw a rectangle on Google Maps (API v3) and store the coordinates of the bottomLeft and topRight corner?

Answer 1

Already got it to work by looking into events. Took a lot of my time to make 🙂

This is how i’ve done it for people that need it to:

function mapsInitialize()
{   
    startPoint = new google.maps.LatLng(lat,lon);
    options = { zoom: 16, center: startPoint, mapTypeId: google.maps.MapTypeId.HYBRID};
    map = new google.maps.Map(document.getElementById("map_canvas"), options);


    google.maps.event.addListener(map, 'click', function(event) {
        if (drawing == true){
            placeMarker(event.latLng);
            if (bottomLeft == null) {
                bottomLeft = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
            }
            else if (topRight == null){
                topRight = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
                drawing = false;
                rectangle = new google.maps.Rectangle();

                var bounds = new google.maps.LatLngBounds(bottomLeft, topRight); 

                var rectOptions = {
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35,
                    map: map,
                    bounds: bounds
                };
                rectangle.setOptions(rectOptions);
            }
        }
    });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });
}