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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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.

<script src="js/jquery.classymap.min.js"></script>

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.

<div class="googleMap" 
    data-output="image" 
    data-zoom="15" 
    data-type="roadmap" 
    data-address="Paris, FR" 
    data-width="700" 
    data-height="500">
</div>

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();

• 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

<div class="googleMap" 
    data-output="image" 
    data-zoom="5" 
    data-address="Tokyo, JP" 
    data-color="green" 
    data-width="700" 
    data-height="500" 
    data-pin="tiny">
</div>

<div class="googleMap" 
    data-address="Port Louis, Mauritius" 
    data-description="Mauritius" 
    data-height="500px" 
    data-width="100%" 
    data-type="hybrid">
</div>

<div class="googleMap" 
    data-address="Rabat, Morocco" 
    data-height="500px" 
    data-width="100%">
</div>