<div id="color-maps" style="height: 400px">
  <div style='padding-top: 180px; text-align: center'>Loading ...</div>
</div>
 
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script type='text/javascript'>
function colormaps() {
  // 1. setup map
  var myLatlng = new google.maps.LatLng(25, -70);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("color-maps"), myOptions);
  // 2. define points and polygon
  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#E01B2F",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#E01B2F",
    fillOpacity: 0.35
  });
  // 3. attach polygon to map
  bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', colormaps);
</script>