PollyFill prototype

poly fill gmaps polygons

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map-canvas"></div>

CSS

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

.polygon > svg {
    height: 100%;
    width: 100%;    
}

.polygon > svg > path {
    cursor: pointer;
}

.polygon > svg > path:active {
    cursor: -webkit-grabbing;
}

 #map-canvas, #map_canvas {
     height: 100%;
 }
 @media print {
     html, body {
         height: auto;
     }
     #map_canvas {
         height: 650px;
     }
 }

JavaScript

function initialize() {
     var myLatLng = new google.maps.LatLng(39.983994270935625, -111.02783203125);
     var mapOptions = {
         zoom: 5,
         center: myLatLng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     //polygon coords for Utah
     var path = [
     new google.maps.LatLng(41.983994270935625, -111.02783203125),
     new google.maps.LatLng(42.00032514831621, -114.01611328125),
     new google.maps.LatLng(36.96744946416931, -114.01611328125),
     new google.maps.LatLng(37.00255267215955, -109.0283203125),
     new google.maps.LatLng(40.97989806962013, -109.0283203125),
     new google.maps.LatLng(41.0130657870063, -111.02783203125)];

     //custom overlay created
     //BW.PolyLineFill(path, map, fillColor?, strokeColor?); 
     var overlay = new BW.PolyLineFill(path, map, "red", "#000");
     
 }

 ///Start custom poly fill code
 PolyLineFill.prototype = new google.maps.OverlayView();

 function PolyLineFill(poly, map, fill, stroke) {
     var bounds = new google.maps.LatLngBounds();
     for (var i = 0; i < poly.length; i++) {
         bounds.extend(poly[i]);
     }

     //initialize all properties.
     this.bounds_ = bounds;
     this.map_ = map;
     this.div_ = null;
     this.poly_ = poly;
     this.polysvg_ = null;
     this.fill_ = fill;
     this.stroke_ = stroke;

     // Explicitly call setMap on this overlay
     this.setMap(map);
 }

 PolyLineFill.prototype.onAdd = function () {
     // Create the DIV and set some basic attributes.
     var div = document.createElement('div');
     div.style.borderStyle = 'none';
     div.style.borderWidth = '0px';
     div.style.position = 'absolute';

     //createthe svg element
     var svgns = "http://www.w3.org/2000/svg";
     var svg = document.createElementNS(svgns, "svg");
     svg.setAttributeNS(null, "preserveAspectRatio", "xMidYMid meet");

     var def =...