How can i set rectangle size in google map?

Question

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?

The rectangle size is cofigured using the `bounds` object. You will have to make an initial coordinate and then add the distance or `size` you want to make the closing coordinate http://stackoverflow.com/questions/2839533/adding-distance-to-a-gps-coordinate — Rob Schmuecker, Sep 02 '14 at 07:20
i think link you posted is related to android.i need this in javascript in google map as you can see my code. — Mr7-itsurdeveloper, Sep 02 '14 at 07:28

score 1 · Accepted Answer · edited Feb 10 '19 at 15:29

1

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/

edited Feb 10 '19 at 15:29

Neuron

5,141
5
38
59

answered Sep 02 '14 at 07:27

Dr.Molle

116,463
16
195
201

Dr.Molle ,But,your code is creating problem,because i have approx 600 grid boxes,it show only 1 with your code,can you explain reason why? – Mr7-itsurdeveloper Sep 02 '14 at 07:58
Hard to say without knowing the code. Example with 600 rectangles: http://jsfiddle.net/cnuu7rtL/10/ – Dr.Molle Sep 02 '14 at 08:07
actually var rectangle is in my foreach loop and im using this code in rectangle: bounds: new google.maps.LatLngBounds( new google.maps.LatLng(40.626805, -89.539396), new google.maps.LatLng(40.626055, -89.538507)), ,you can check here this code is same as my original code http://jsfiddle.net/cnuu7rtL/11/ – Mr7-itsurdeveloper Sep 02 '14 at 08:10
There are 2 rectangles, but they are placed at the same position, so one rectangle will cover the other rectangle. When you make them transparent you will see both: http://jsfiddle.net/cnuu7rtL/14/ – Dr.Molle Sep 02 '14 at 08:11
i think var map = is creating problem ,this is not in foreach loop.and your function calcBounds(center,size) is taking same center,am i right ?? – Mr7-itsurdeveloper Sep 02 '14 at 08:24
1

`calcBounds` will use the center that has been passed as argument, when you always pass the center of the map it will always use this point. Example using the center of your given LatLngBounds instead: http://jsfiddle.net/0c9rnyf8/ (I've added some markers because the rectangles are hard to find at higher zoom-levels) – Dr.Molle Sep 02 '14 at 09:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60445/discussion-between-mr7-itsurdeveloper-and-dr-molle). – Mr7-itsurdeveloper Sep 02 '14 at 10:30
can we drew line between these two center points without Markers?in your example http://jsfiddle.net/0c9rnyf8/ – Mr7-itsurdeveloper Sep 02 '14 at 11:59
Actually, i have multiple boxes and when I implement lines are drwan like this http://jsfiddle.net/0c9rnyf8/2/ Is it possible to draw a line within boxes from point to point.?? – Mr7-itsurdeveloper Sep 02 '14 at 12:32

How can i set rectangle size in google map?

1 Answers1