CODEWITHSUNDEEP
htmlgoogle-mapsgoogle-maps-api-3
Rajneel Joshi
Rajneel Joshi

Reputation: 131

How to Draw a Rectangle on Google Map using Google Map API

i am new to stackoveflow, can any one help me to how to draw a rectangle using google api v3, i went through some examples on google i got the below code,

function initialize() {

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);
  var rectangle;

  var myOptions = {
    zoom: 11,
    center: coachella,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  rectangle = new google.maps.Rectangle();

  google.maps.event.addListener(map, 'zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    var rectOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    };
    rectangle.setOptions(rectOptions);
  });
}

But, it functions on zoom event(zoom chanages),i want simple with out event,please help me

Upvotes: 0

Views: 3867

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

map.getBounds() may return not the desired bounds when called to early(immediately after the instantiating of the map).

You may use tilesloaded instead

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
     /*your code*/
  });

Upvotes: 2

Related Questions