Google Maps Rectangle

HTML

<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>
<div id="map"></div>

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: 7,
       center: new google.maps.LatLng(47.53772, -122.1153),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var myPos = new google.maps.LatLng(47.56715, -122.1556);
     var marker = new google.maps.Marker({
       position: myPos,
       icon: {
         url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
         anchor: new google.maps.Point(16, 28)
       },
       map: map
     });


     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();