Google Maps Rectangle

Draw rectangle on google maps.

by ceebee

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

JavaScript

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 60.18, lng: 24.93},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      //west: 26.015625, north: 59.17592824927136, east: 26.71875, south: 59.5343180010956
      //west: 33.75, north: 52.48278022207821, east: 39.375, south: 55.7765730186677
      west: 24.9609375, north: 60.15244221438077, east: 24.98291015625, south: 60.16337605648777
    // west: 24.873046875, north: 60.20707506634914, east: 24.89501953125, south: 60.21799073323445
    }
  });
}

initMap();