Flickr-style Hover To Zoom Google Maps - jQuery geozoom

geozoom is a jQuery plugin which lets you create Flickr-style hover to zoom Google Maps using Google Static Maps API 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.

How to use it:

1. Download the plugin, then include jQuery, jquery-geozoom.js and jquery-geozoom.css on the webpage. Make sure jquery-geozoom-pin.png is in images/ (More specifically, ../images/ relative to wherever you put the CSS file).

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="javascripts/jquery-geozoom.js"></script>
<link rel="stylesheet"href="stylesheets/jquery-geozoom.css">

2. 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.

<div class="geozoom"></div>

$(".geozoom").geozoom();

3. Supported parameters:

• 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

4. They can be passed into the constructor or included in the HTML element's data attributes:

<div class="geozoom"
     data-width="400"
     data-height="200"
     data-address="San Francisco, CA"></div>

5. 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.

---

This awesome jQuery plugin is developed by hunterbridges. For more Advanced Usages, please check the demo page or visit the official website.