jQuery Google map plugin

08Sep2012

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.

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

//run google map plugin
$('.googleMap').fryedGooglemap({
  postcode : 'B168UU',
  width    : 400,
  height   : 400
});

//run google map plugin

$('.googleMap').fryedGooglemap({

postcode : 'B168UU',

width : 400,

height : 400

});

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)

The google directions can easily be styled from the fryed.googlemap.css file.