May 16 2011
If you are asking yourself “is this something new that I didn’t know about Google maps?” than the answer is no, but this is something that is very useful and can be used in pages where you want to add Google maps to locate the business.
The implementation is very simple. In our first example the script only takes coordinates. I use this http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html site to get the coordinates for some particular place.
These are the options and their defaul values that you can use and manipulate with to get the wanted combination:
|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)|
In the second example I’ve used some of the parameters to customise the map. Firstly the height and weight of the map and than the zoom level of the three positions each.
Click » jQuery Static Google Map Hover Zoom « to view the live DEMO
Click » jQuery Static Google Map Hover Zoom « to DOWNLOAD the EXAMPLE