title: Adding custom pattern overlays on Google Maps
body: <p>I'm currently using Google Maps API and I'm open to try out other free map APIs to accomplish my task. </p>
  
  <p>In one of the projects I'm working on, I need to be able to overlay multiple shape overlay layers on top of one another. My initial thought is to have the first overlay layer to use different shades of solid colors. For subsequent overlay layers, I plan to use different color-coded patterns... ex: the second overlay layer uses color-coded stripe pattern and another overlay layer uses color-coded checkerbox pattern.  This way, I can stack these overlay layers to represent multiple things. For the first overlay layer, I'm able to create irregular shape boundaries using <a href="http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polygons" rel="nofollow">Polygon</a> objects and I'm able to set different fill colors on the polygons depending on the associated values. </p>
  
  <p>After digging around, it seems like the Polygon object in Google Maps API only accepts fill and stroke colors, and I don't seem to be able to set custom pattern on a Polygon object. I was hoping it will at least take a PNG pattern file but it doesn't. The closest things I could use is <a href="http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays" rel="nofollow">GroundOverlay</a> object but that's not going to work for me because it accepts only 2 coordinates (top left and bottom right, I believe) whereas I need to create custom pattern overlays on irregular shapes.</p>
  
  <p>Can I accomplish this using Google Maps API, or any other map APIs (Bing, Yahoo, etc)? Are there any third party APIs that allow me to integrate custom pattern overlays on Google Maps?</p>