Google Maps Rectangle

by kuyabiye

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
    <script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </head>
  
  <body>
    <div id="map"></div>
  </body>

</html>

CSS

#map {
  height:400px;
  width:100%;
  border:6px solid #dedede;
  margin:0 auto;
}

JavaScript

function initialize() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 11,
       center: new google.maps.LatLng(47.53772, -122.1153),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var rectangle = new google.maps.Rectangle({
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#ffffff',
       fillOpacity: 0.35,
       map: map,
       bounds: new google.maps.LatLngBounds(
       new google.maps.LatLng(47.5204, -122.2047),
       new google.maps.LatLng(47.6139, -122.1065))
     });
   }

   initialize();