CODEWITHSUNDEEP
javascriptgoogle-maps
Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

How can i set rectangle size in google map?

I'm creating rectangle using coordinates with Google Map.

I want to set its size to 75 meter(width & height equal to 75).

This is My code :

function initialize() { 

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 20,
    center: new google.maps.LatLng(40.626805, -89.539396),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

var rectangle = new google.maps.Rectangle({ 
    strokeColor: 'green',
    strokeOpacity: 12,   
    strokeWeight: 12,     
    fillColor: 'green',  
    fillOpacity: 12,    
    map: map,   
    bounds: new google.maps.LatLngBounds(
    new google.maps.LatLng(40.626805, -89.539396),
    new google.maps.LatLng(40.626055, -89.538507))   
    });     

}

google.maps.event.addDomListener(window, 'load', initialize);

Fiddle Example: http://jsfiddle.net/cnuu7rtL/4/

Please Tell me How can i set rectangle size in google map?

Upvotes: 1

Views: 4797

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Assuming you have a desired center of the rectangle(it's possible too with other points like southwest, northeast, etc.):

Use the geometry-library to calculate the distances from the given center to create the bounds.

Sample-function:

function calcBounds(center, size) {
    var n = google.maps.geometry.spherical.computeOffset(center, size.height/2, 0).lat(),
    s = google.maps.geometry.spherical.computeOffset(center, size.height/2, 180).lat(),
    e = google.maps.geometry.spherical.computeOffset(center, size.width/2, 90).lng(),
    w = google.maps.geometry.spherical.computeOffset(center, size.width/2, 270).lng();
    return new google.maps.LatLngBounds(new google.maps.LatLng(s,w),
                                          new google.maps.LatLng(n,e))
}

Usage:

new google.maps.Rectangle({bounds:calcBounds(new google.maps.LatLng(40.626805, 
                                                                    -89.539396),
                                             new google.maps.Size(75,75)),
                           map:map});

Demo: http://jsfiddle.net/cnuu7rtL/7/

Upvotes: 1

Related Questions