It seems one of the highest keyword searches in Google is “jQuery Google Maps” so i figured i may as well continue and make a series of plugins that make Google Maps and jQuery play together.

This time is the jMapping Google Maps plugin. So here is the usual skinny on the features and background:

Who?

What?

So what does this plugin do? i think the best thing is to give the description given by the author:

jQuery plugin for creating Google Maps from semantic markup

This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

jQuery jMapping plugin

The plugin is fairly easy to get a handle on and allows you easily add info bubbles and embed HTML inside of the info-bubbles in an easy clean manner. The point is always to minimize number of interfaces to deal with and this adequately allows you to not even think of the Google Map API syntax and more on the business of coding your application.

Features

How?

1. Include the Google Maps API javascript

2. Add in the dependencies: MarkerManager 1.1,jQuery Metadata plugin 2.1 and MapIconMaker 1.1

3. Add in the HTML markup for the plugin

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
</div>

4. Add the jQuery to get the plugin to work

$(document).ready(function(){
  $('#map').jMapping();
});

I guess seeing is believing so i have embedded a demonstration below:

I think another great mapping plugin to get more control over your Google Maps applications using jQuery and the jMapping plugin.

There are plenty of examples to get started with and setup is a breeze, but it is important to remember that there are a lot of others out there so be sure to give them a whirl too.

Related articles by Zemanta

• Google Maps #2 Map Provider in US- #1 Mapping Site in US? Google Maps API (blumenthals.com)
• Maps in boxes, show your users where to go without making them leave (dtelepathy.com)