08Sep2012
jQuery Google map plugin
This is a plugin for jQuery which will dynamically add a google map to any webpage with options for custom icons and google directions.
You can download the plugin by clicking on the link in the downloads section of the sidebar.
To use the google map plugin
First copy the googlemap script to your server. Then include jQuery and the googlemap script in the head section of your website.
Then initiate the plugin by using the script below (make sure to wrap the script in a document ready or similar function).
1 2 3 4 5 6 |
//run google map plugin $('.googleMap').fryedGooglemap({ postcode : 'B168UU', width : 400, height : 400 }); |
The inbuilt options
The googlemap plugin has ten inbuilt options.
- width: the width of the google map (can be in % if specified as a string – ie. ‘100%’)
- height: the height of the google map
- postcode: the postcode/zip code for the map to center on (overwrites lat and long values if specified)
- lat: the lattitude for the map to center on (overwritten if postcode is specified – requires lng)
- lng: the longitude for the map to center on (overwritten if postcode is specified – requires lat)
- zoom: the zoom level of the map
- icon: the custom icon path. ie. ‘images/custom-icon.png’ (must be a png)
- iconTitle: the text to display if the user hovers over the icon
- directions: whether to show directions. if true, a form will be displayed under the map prompting for a location. and directions will be shown once ‘get tirections’ is clicked
- debug: a helper function. if true the lat and lng of a mouse click on the map will be logged in the console. (useful for getting a lat and lng value to position the icon)
Notes
The google directions can easily be styled from the fryed.googlemap.css file.