article:
Responsive Plugin: The Heads-Up Grid
article:
Code: Set Text on a Circle

JS Plugin: jMapping

Advertisement

jQuery plugin for creating Google Maps from semantic markup.

Plugin: jMapping

"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.
The plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible. The plugin expect the HTML for the locations to be grouped under a common element. Additionally, it expects the links and Map Info Window content to be grouped under the location elements. It also expects the necessary metadata to be on the location element. This way the HTML semantically reflects that all of those parts and information are associated with the specific location or place."


Usage

include the necessary scripts in your page

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;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.4.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();
});


Plugin: jMapping






source
demo
download
github

Advertisement
Tags: map. google, gmaps, mobile, desktop, internet, layout, location, jquery, plugin, web, css, html

Leave a Comment

No Comment

© Creative3x Ltd.