Fork me on GitHub

Download the necessary dependencies and jMapping.

Make sure you include the necessary scripts in your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript" src="markermanager.js"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>

Make sure your HTML has a div element for the Google map, and there is a container element with some locations and their data. The data by default is expected to be on the "data-jmapping" attribute of the location (this can be configured):

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

<div id="map-side-bar">
  <div class="map-location" data-jmapping="{id: 5, point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
    <a href="#" class="map-link">Some Place</a>
    <div class="info-box">
      <p>Some thing for the info box.</p>
    </div>
  </div>
  <div class="map-location" data-jmapping="{id: 8, point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
    <a href="#" class="map-link">Another Place</a>
    <div class="info-box">
      <p>Example Text.</p>
    </div>
  </div>
</div>

Then just call the jMapping function on the map element:

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

If you need to change the markers on the map, usually for some type of pagination, this can be done by simply updating the content of the "side-bar" container to contain new location data and then calling the update function:

$('#map-side-bar').load('ajax/path/file.html', nil, function(){
  $('#map').jMapping('update');
});

OR

$('#map-side-bar').load('ajax/path/file.html', nil, function(){
  $('#map').data('jMapping').update();
});

Options

Name Description Default
side_bar_selector This defines the selector where location items will be searched for within. "#map-side-bar:first"
location_selector This defines the selector for location items. This is the element that the metadata needs to be associated with.
The plugin will look for items matching this selector inside of the side bar element.		 ".map-location"
link_selector

This selector defines the link that will be used to "activate" a marker on the map. If info window elements are provided the HTML inside of them will be loaded into the pop up window when these links are clicked. You should set this value to false if you do not wish to use this functionality.

The plugin will change the href URLs on these links, but they can be set to something meaningful incase the users browser doesn't support Google Maps.
These links will be searched for inside of the location elements specified in the location_selector.

 a.map-link
info_window_selector This selector defines where the content for the Google Maps info window for each location marker is. This element will be searched for inside of the location elements specified in the location_selector. If no element is found no Info Window will be attached to the marker. ".info-box"
default_point This point determines the Google Maps location if there are no location elements inside the specified location_selector. {lat: 0.0, lng: 0.0}
metadata_options This is the set of options passed to the jQuery metadata function. It defines how the necessary metadata for each location will be searched for. See the metadata plugins docs for more info. {type: "attr", name: "data"}
info_window_max_width This specifies what the max width the Google Maps Info Windows can be when a marker is activated. 425
map_config

TThis can be set to a MapOptions object. Which is just a normal object { } with specific properties that become the settings for the map.

 None
category_icon_options

By default the plugin will use the default Google Maps marker icon. But you can use this option to specify what options to pass to the StyledMarker based on category data associated with the location. It accepts 2 types of values: an object or a function.

If the setting is to an object it will take the category data on the location and look for a key on the object that matches and return that value. If there is no value for the supplied category, it will return the value specified in the "default" key.

If the setting is set to a function it will call the function and pass the value for the category data to the function, returning the result. This can be used for more complicated logic and for using something other then just string data in the category, such as an object with multiple data attributes it's self.

The object values for the associated category key or the function should return one of three data types:

  1. A string, this will be used as the image source for the marker icon.
  2. A google.maps.MarkerImage, this will be used as the icon for the Marker object.
  3. An object that has valid options for a StyledIcon object.
 None
default_zoom_level

Use this option to set the default zoom level for your map. Normally, zoom level is set dynamically based on the position of locations being mapped. But, in some cases, like viewing a single mapped location, you may wish to set a default zoom level. Zoom level values should be between 1 and 20. Neighborhood level is approximately 15.

 None
force_zoom_level This will force the map to always be rendered at this zoom level. None
always_show_markers Set this option to true if you wish to display markers on all zoom levels. (Normally, the markers may only be visible on certain zoom levels, depending on the normal bounds and zoom level of the marker data.) false

Object API

The jMapping API object is available from the “jMapping” data value on the selector passed to the original $().jMapping function.

For example:

$('#map').jMapping();
    $('#map').data('jMapping'); // returns the jMapping API object

The API of that object:

Event API

There a number of events that fire as jMapping is used.