jQuery Static Gmap Zoom

By @phpgeek - Last update 10th nov 10

What is it?

jQuery Static Gmap Zoom is a simple jQuery plugin. It creates a static google map with a onmouseover zoom effect, as a light-weight alternative to a normal dynamic Google map.


First, include the jQuery and Static Gmap Zoom javascript files inside your <head> tags.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.staticgmapzoom.js" type="text/javascript"></script>

Next you need to add a function call to Static Gmap Zoom. This should normal be placed inside your <head> tags as well. This snippet creates a gmap in the div ID'd with "gmap"

<script type="text/javascript">
$(document).ready(function() {

Finally - add the gmap div where the map should be inserted.

<div id="gmap></div>


mapWidth Integer - The map width in pixels. (Default: 400)
mapHeight Integer - The map height in pixels. (Default: 200)
mapZoom1 Integer - The default zoom level. Between 1 and 21. (Default: 3)
mapZoom2 Integer - The mouseover zoom level. Between 1 and 21. (Default: 6)
mapZoom3 Integer - The maximum zoom level. Between 1 and 21. (Default: 12)
mapType String - Maptype - choose between roadmap, terrain, satellite or hybrid. (Default: roadmap)
zoomInDistance Float - The percentage from center where zoom to level 3 are done. Between 0.0 and 0.99 (Default: 0.25)


Example 1 is a basic implementation where only the coordinates are given.

Example 1


Example 2 shows you a implementation where the size of the map and the zoom levels have been changed.

Example 2

var options = {mapWidth:300,mapHeight:300,mapZoom1:5,mapZoom2:8,mapZoom3:14};

Download and Support

You can download it here:
Download version 1.0 compressed
Download version 1.0 uncompressed

Need support? Well - feel welcome to send me an e-mail at johan@phpgeek.dk or try to catch me at Twitter @phpgeek

If you find any bugs please let me know at johan@phpgeek.dk