ClassyMap
Google Maps + jQuery = love!

ClassyMap is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that gives you the ability to embed Google Maps in your site using just HTML5 code.

Download it

First you need to include the jQuery library, since ClassyMap is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyMap javascript file into your page. You can do it by adding the code below to your page.

Next, you implement the DOM structure that will be processed by the plugin. The structure is as simple as it can get, create a DIV and give it a class. You can use the HTML5 data- attribute to specify additional options, check the Options section below for more info or just look at the demos.

As the last step, you trigger the ClassyMap() function on the element you just created. In this case, we trigger the function on the div with the class googleMap.

$('.googleMap').ClassyMap();

• Parameters

  ---

• address - Google Maps address you want to point
• output - whether to output the map as an image or iframe, default is iframe
• zoom - zoom level of the map, between 0 and 20, default is 10
• lang - language of the Google Maps interface
• width - width of the map
• height - height of the map
• type - map type, can be roadmap, satellite, terrain or hybrid, default is roadmap
• pin - pin size, can be tiny, medium or large, default is medium
• color - color of the pin. (For ex: green, red, etc.)
• description - show a description of the location pinpointed