jQuery geozoom Plugin Demos

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, download the plugin. 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")
• zstart - Initial zoom level (Default: 2; Values between 1 - 14)
• zmiddle - Middle zoom level (Default: 5)
• zend - End zoom level (Default: 10)
• label - Show or hide the label (Default: true)
• pin - Custom pin image (optional)
• pin-width - Width of custom pin
• pin-height - Height of custom pin

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>

---

Customizable Zoom Levels

You may also provide specific zoom levels (1-20), for example if your audience needs to start on the city-wide zoom level and get to the street from there.

    <script>
      $(document).ready(function () {
        $(".geozoom").geozoom();
      });
    </script>
    <div class="geozoom"
         data-width="400"
         data-height="200"
         data-zstart="11"
         data-zmiddle="14"
         data-zend="17" ></div>

---

Optional Label

Turn the label on/off

    <script>
      $(document).ready(function () {
        $(".geozoom").geozoom();
      });
    </script>
    <div class="geozoom"
         data-width="400"
         data-height="200"
         data-label="false" ></div>

---

Customize Pin

Customize the pin image by supplying image path

    <script>
      $(document).ready(function () {
        $(".geozoom").geozoom();
      });
    </script>
    <div class="geozoom"
         data-width="400"
         data-height="200"
         data-pin="http://www.timeanddate.com/gfx/n/icon/icon-map-pin.png"
         data-pin-width="18"
         data-pin-height="34" ></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! :)