Question

I successfully installed epoly.js for V2 and got it working.

However in V3 I get this error in my console:

ReferenceError: Can’t find variable: GPolygon

Any ideas?

Answer 1

OK I have found a solution courtesy of the guy(s) at http://dyve.posterous.com/?tag=googlemaps

They provide 2 routines:

if (!google.maps.Polygon.prototype.getBounds) {
    google.maps.Polygon.prototype.getBounds = function(latLng) {
        var bounds = new google.maps.LatLngBounds();
        var paths = this.getPaths();
        var path;
        for (var p = 0; p < paths.getLength(); p++) {
            path = paths.getAt(p);
            for (var i = 0; i < path.getLength(); i++) {
                bounds.extend(path.getAt(i));
            }
        }
        return bounds;
    }
}

if (!google.maps.Polygon.prototype.contains) {
    google.maps.Polygon.prototype.contains = function(latLng) {
        // Outside the bounds means outside the polygon
        if (!this.getBounds().contains(latLng)) {
            return false;
        }
        var lat = latLng.lat();
        var lng = latLng.lng();
        var paths = this.getPaths();
        var path, pathLength, inPath, i, j, vertex1, vertex2;

        // Walk all the paths
        for (var p = 0; p < paths.getLength(); p++) {

            path = paths.getAt(p);
            pathLength = path.getLength();
            j = pathLength - 1;
            inPath = false;
            for (i = 0; i < pathLength; i++) {
                vertex1 = path.getAt(i);
                vertex2 = path.getAt(j);
                if (vertex1.lng() < lng && vertex2.lng() >= lng || vertex2.lng() < lng && vertex1.lng() >= lng) {
                    if (vertex1.lat() + (lng - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < lat) {
                        inPath = !inPath;
                    }
                }
                j = i;
            }
            if (inPath) {
                return true;
            }
        }
        return false;
    }
}

I then simply add this code

function initialize() {
  var areas = [];
  var coords = [];
  var latlng = new google.maps.LatLng(53.85, -2.15);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map,
      title:"Hello World!",
      draggable: true
  });   
  coords[0] = [
      new google.maps.LatLng(53.9, -2.15),
      new google.maps.LatLng(53.91, -2.05),
      new google.maps.LatLng(53.85, -2.10),
      new google.maps.LatLng(53.9, -2.15)
  ];
  areas[0] = new google.maps.Polygon({
    paths: coords[0],
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  areas[0].setMap(map);
  coords[1] = [
      new google.maps.LatLng(53.9, -2.14),
      new google.maps.LatLng(53.88, -2.05),
      new google.maps.LatLng(53.85, -2.09),
  ];
  areas[1] = new google.maps.Polygon({
    paths: coords[1],
    strokeColor: "#00FF00",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#00FF00",
    fillOpacity: 0.35
  });
  areas[1].setMap(map);
  google.maps.event.addListener(marker, 'dragend', function(point) {
    for(var area = 0; area <= areas.length; area++) {
      alert(area+" "+areas[area].contains(point.latLng));
    }
  });
}

Drag the pin over 1 or both of the triangles to get true/false.