The Google Maps Gremlin Hacks

When you purchase a Mogwai it comes with a warning -

'Avoid water at all costs!'

The map development team at Belly recently had a similar problem - only in their case it was how to avoid placing randomly located map markers in bodies of water.

The Belly team needed to create a map that showed the location of a business with randomly located map markers displayed around the business to represent potential customers. Adding random markers to a map is easy. The Google Maps API documentation even includes a good example of adding five map markers to a map at random.

The problem that the Belly team had was that they didn't want to create a map where potential customers were shown to live in lakes and oceans. They therefore needed to come up with a hack that avoided placing markers in bodies of water on the map.

Their solution, Google Maps Water Pixel Detection With Canvas, is an ingenious method of determining water bodies on Google Maps. The hack involves using pixel detection to determine if a location is the color of water on the map, The hack involves a bit of a work on the part of the developer but it appears to work very well.


The only other time I've encountered this need for a 'Gremlin Hack' was in the Yarr, Pirate Map. The Yarr, Pirate Map uses the Google Maps API to create a distinct pirate themed map, complete with animated waves, birds and pirate ships.

One impressive feature on this map is how the ship and wave map markers are only placed in the sea and sea-gulls only appear near the shore. In this case the developer used the Google Maps API Elevation Service to determine sea and shore locations.

Detecting sea level works very well near the ocean. However it isn't a complete solution to avoiding water on Google Maps. Sometimes locations on land can also be located at sea level and, in the case of our pirate map, you can end up with ships stranded in the desert.


The advantage of the Yarr, Pirate Map hack is that it is fairly simple to implement. If you need a solution that manages to avoid water most of the time but isn't perfect then using the Elevation Service is a good way to go. If, however, you need to avoid water at all costs then I would advise trying the pixel detection method. It is a complete Gremlin hack.