Loading Gif

jQuery Google map plugin

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).

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.