Geozoom

By Hunter Bridges

Geozoom is a jQuery plugin. It is basically an adaptation of a clever UI element on Flickr; it just uses Google Static Maps instead of Yahoo. When you hover over a Geozoom map, it zooms in depending on how close your pointer is to the center. It also works pretty well on touch devices.

Usage

First, grab it from Github. Then, include jQuery, jquery-geozoom.js, and jquery-geozoom.css. Make sure jquery-geozoom-pin.png is in images/ (More specifically, ../images/ relative to wherever you put the CSS file).

All you have to do is call the .geozoom() constructor. You will get a 512x512 Geozoom map of New York, NY! I figured it was a sensible default.

Supported parameters are

width - Width of your Geozoom map element (Default: 512)
height - Height of your Geozoom map element (Default: 512)
address - Address for your Geozoom map (Default: "New York, NY")
maptype - The type of map you wish to render. Options are roadmap, satellite, terrain, and hybrid. (Default: "hybrid")

They can be passed into the constructor or included in the HTML element's data attributes. For example, these will produce the same results:

Ex. 1

<script>
  $(document).ready(function () {
    $(".geozoom").geozoom();
  });
</script>
<div class="geozoom"
     data-width="400"
     data-height="200"
     data-address="San Francisco, CA"></div>

Ex. 2

<script>
  $(document).ready(function () {
    $(".geozoom").geozoom({width:400, height:200});
  });
</script>
<div class="geozoom"
     data-address="San Francisco, CA"></div>

Limitations

Since Geozoom uses Google Static Maps, we get all the images for free. However, there are limitations for the Google Static Maps free tier. The most notable of these is that the maximum image size is 640x640. To get around this, Geozoom handles resizing for you. You can make a Geozoom map of any size, but ones larger than 640x640 will have stretched images. I don't think it looks too bad, but you can be the judge! :)