Netism Map Extreme jQuery

Sample (Google Maps)  | Sample (Bing Maps)  | jQuery.com Page

Current version : 0.5 (see below for changelog)
 

Netism Map Extreme jQuery is a jQuery plugin to create a map widget based on HTML tags and attributes.  It supports both Google Maps and Bing Maps, and can simply switched by setting map="google" or map="bing".  It will then render the map accordingly!  It is completely skinnable.  It retrieve information from attributes and selecting the element by CSS class name.  You have total control of the layout and style.

 
 

HTML:

 

<div class="netism-map">

    <div id="map1" class="netism-map-control" map="google"></div>

    <div class="netism-map-list" >

        <div class="netism-map-location" latitude="-34.1" longitude="150.1" icon="">

            <div class="netism-map-infobox">box 1</div>

            <div>location 1</div>

        </div>

        <div class="netism-map-location" latitude="-34.2" longitude="150.2" icon="">

            <div class="netism-map-infobox">box 2</div>

            <div>location 2</div>

        </div>

        <div class="netism-map-location" latitude="-34.3" longitude="150.3" icon="">

            <div class="netism-map-infobox">box 3</div>

            <div>location 2</div>

        </div>

    </div>

    <div style="clear:both;" />

</div>

 

jQuery:

 

        $(document).ready(function ()

        {

            $(".netism-map").mapExtreme();

        });

 

 Styles:

 

        .netism-map-control
               { position:relative; width:300px; height:300px; float:left; border: 1px solid black; }

        .netism-map-list
               { width:300px; float:right; }

        .netism-map-infobox
               { display:none; }

 

 Change Logs:

       0.5 (10/19/2010) - newly created.