Hover To Zoom Google Maps – jQuery geozoom

jQuery geozoom
File Size:8.48 KB
Views Total:212
Last Update:December 24, 2017
Publish Date:December 24, 2017
Official Website:Go to website
License:MIT

Geozoom plugin is a jQuery plugin for use google map zoom on hover. google map on mouse 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 512×512 Geozoom map of New York, NY! I figured it was a sensible default.
    <div class="geozoom"></div>
  3.  Add HTML code:
    <div class="geozoom"
         data-width="400"
         data-height="200"
         data-address="San Francisco, CA"></div>
  4.  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

Done 🙂