Draw Polygon with GPolygon without GMap

Question

Anyone know how I can draw Polygons with GPolygon from Google Map without having a map, inside other elements? Or anyone know any framework to do it with the same features like GPolygon?

I would like to have this "draw polygon" on a custom element, like div:

<div id="MyArea"></div>

Answer 1

Check out Raphael, a javascript library that wraps around VML in IE and SVG in standards compliant browsers. It's fairly easy to use and quite well documented.

Granted, the path element (used to draw polygon and polylines) uses the SVG path string syntax which is a bit cryptic but quite easy to understand. You can of course extend Raphael to use a more simple syntax:

Raphael.fn.polygon = function () { // supply x,y coordinates as arguments
    var self = this.path();
    self.coords = [];
    for (var i=0;i<arguments.length;i++) self.coords.push(arguments[i]);

    self.update = function () {
        var pathlist = [];
        // the M command moves the cursor:
        pathlist.push('M'+self.coords[0]+' '+self.coords[1]);
        // the L command draws a line:
        pathlist.push('L');
        // Now push the remaining coordinates:
        for (var i=2;i<self.coords.length;i++) {
            pathlist.push(self.coords[i]);
        }
        // the Z command closes the path:
        pathlist.push('Z');
        self.attr('path',pathlist.join(' ');
    }
    self.update();
    return self;
}

Which should allow you to do:

<div id="MyArea"></div>
<script>
    var paper = Raphael("MyArea",640,480);
    var mypolygon = paper.polygon(
      10, 10,
      20, 20,
      10, 30
    );

    // you can even modify it after creation:
    mypolygon.coords.push(15,20);
    mypolygon.update();
</script>

Or create your own polygon API to taste if you don't like mine.

Answer 2

I agree with slebetman that Raphael is totally great. Note, however, that neither SVG nor VML is currently supported in the Android browser. Canvas with excanvas.js may be a better bet for cross-browser work, if you are also targeting Android.

Also, if you really want to use the Google Map API, you can simply hide the map. But you would still be stuck with the Google logo due to the Terms of Use.

You can do this by using a tile with a single color in v2, but I believe there are other ways do this in v3.

Example of the v2 method: http://fisherwebdev.com/california

Example of hiding some of the map features in v3: http://fisherwebdev.com/mapcolors -- You can use this same technique to hide all features.

Play around with this to see what is possible to hide/show or restyle in v3: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html