How to draw straight lines inside google map polygon

Question

I have created a google map using google map javascript API V3. I am drawing number of zipcode polygons. The polygons are of different colors depending upon some condition. Now I want to draw straight lines/ hash marks inside some of the polygons depending upon certain criteria. How can we do it. Below is the code which I have written for drawing the polygons.

{% if zip.zip_info.zip_polygon %}
    var path = [
        {% for polycoord in zip.zip_info.zip_polygon %}
            new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
        {% endfor %}
        ];

    var polygon_{{ forloop.counter }} = new google.maps.Polygon(
    {
        path:path, 
        clickable:true,
        strokeColor: '#000000',
        strokeOpacity: 0.15,
        strokeWeight: 2,
        fillColor: fillColor,
        fillOpacity: 1,
        zipcode: '{{zip.zip_info.zipcode}}'
    });

    polygon_{{ forloop.counter }}.setMap(map);

{% endif %}

I am also givinging the image link of my requirement.

You can see in the image some of the polygons are shaded with straight lines, and some are shaded with only colors.

Answer 1

I have been working on the same issue. This is what I have so far: jsFiddle of Example

The BW.PolyLineFill function creates a Custom Overlay. It takes 4 parameters with the last two being optional.

 1. path: an array of Google LatLng objects   
 2. map: the map to attach theoverlay to 
 3. fillColor: (optional) the color of the fill, default is red. 
 4. strokeColor: (optional) the stroke color, default is black

I haven't tested the performance and it probably still needs more tweaking, but it should get you started.

Relevant 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 = document.createElementNS(svgns, "defs");

    //create the pattern fill 
    var pattern = document.createElementNS(svgns, "pattern");
    pattern.setAttributeNS(null, "id", "lineFill");
    pattern.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
    pattern.setAttributeNS(null, "patternTransform", "rotate(-45)");
    pattern.setAttributeNS(null, "height", "7");
    pattern.setAttributeNS(null, "width", "7");
    def.appendChild(pattern);

    var rect = document.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "id", "rectFill");
    rect.setAttributeNS(null, "fill", this.fill_ || "red");
    rect.setAttributeNS(null, "fill-opacity", "0.3");
    rect.setAttributeNS(null, "stroke", this.stroke_ || "#000");
    rect.setAttributeNS(null, "stroke-dasharray", "7,7");
    rect.setAttributeNS(null, "height", "7");
    rect.setAttributeNS(null, "width", "7");
    pattern.appendChild(rect);

    svg.appendChild(def);

    //add polygon to the div
    var p = document.createElementNS(svgns, "polygon");
    p.setAttributeNS(null, "fill", "url(#lineFill)");
    p.setAttributeNS(null, "stroke", "#000");
    p.setAttributeNS(null, "stroke-width", "1");
    //set a reference to this element;
    this.polysvg_ = p;
    svg.appendChild(p);

    div.appendChild(svg);

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayLayer pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
}

PolyLineFill.prototype.AdjustPoints = function () {
    //adjust the polygon points based on the projection.
    var proj = this.getProjection();
    var sw = proj.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = proj.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    var points = "";
    for (var i = 0; i < this.poly_.length; i++) {
        var point = proj.fromLatLngToDivPixel(this.poly_[i]);
        if (i == 0) {
            points += (point.x - sw.x) + ", " + (point.y - ne.y);
        } else {
            points += " " + (point.x - sw.x) + ", " + (point.y - ne.y);
        }
    }
    return points;
}

PolyLineFill.prototype.draw = function () {
    // Size and position the overlay. We use a southwest and northeast
    // position of the overlay to peg it to the correct position and size.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the southwest and northeast coordinates of this overlay
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to resize the DIV.
    var sw = overlayProjection
                .fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection
                .fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's DIV to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';

    this.polysvg_.setAttributeNS(null, "points", this.AdjustPoints());
}

PolyLineFill.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
}
window.BW = {};
window.BW.PolyLineFill = PolyLineFill;