Answer 8 quick questions to get a personalised quote from Webski
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.
It’s a Google static map that zooms in when you move with the cursor towards the marker of the map. What is really happening on the other side is actually a jQuery code. Besides the main jQuery library there is another JavaScript file that is using the methods form the main library.
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
Web Design
Telco Drafting
Marketing, SEO, PPC & Social
Commercial & Residential
Graphic Design
3D Modelling
Hosting & Support
Game Development
Mobile Apps
Other Services