Setup

Requires 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key="></script>
<script type="text/javascript" src="MarkerClusterer.js"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="jquery.mosne.map.js"></script>

Real life examples

Demos

Map1: simple

" data-lng="">

Link

foo

Hello world!

<div id="map_1" class="mapbox"></div>
<div id="map_1_list" class="list">
  <div class="maplocation" data-name="Link 1"  data-lat="41.1051872" data-lng="13.2934012">
    <h2><a href="#" class="maplink">Link 1</a></h2>
    <div class="infobox">
      <h2>Link 1</h2>
      <p>Hello world!</p>
    </div>
  </div>
  ...
</div>
$("#map_1").mosne_map({elements:'#map_1_list .maplocation'});

Map2: advanced

" data-lng="">

Link

foo

Hello world!

var mycolor = "#ff0066";
var mycolor2 = "#966E7E";
var mybg_color = "#000000";

var cluster_styles = [{
    url: 'images/m3.png',
    height: 30,
    width: 30,
    opt_textSize: 14,
    anchor: [3, 0],
    textColor: '#222222'
}, {
    url: 'images/m4.png',
    height: 40,
    width: 40,
    opt_textSize: 17,
    opt_anchor: [6, 0],
    opt_textColor: '#222222'
}, {
    url: 'images/m5.png',
    width: 50,
    height: 50,
    opt_textSize: 21,
    opt_anchor: [8, 0],
    opt_textColor: '#222222',
}, {
    url: 'images/m5.png',
    width: 50,
    height: 50,
    opt_textSize: 21,
    opt_anchor: [8, 0],
    opt_textColor: '#222222',
}];

var marker_icon = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|f6005d|f6005d';

// Styledmaps wizard 
// http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/

var stylez = [{
    featureType: "water",
    elementType: "all",
    stylers: [{
        invert_lightness: true
    }, {
        lightness: -100
    }]
}, {
    featureType: "road",
    elementType: "all",
    stylers: [{
        visibility: "on"
    }, {
        saturation: -99
    }, {
        gamma: 0.34
    }]
}, {
    featureType: "landscape",
    elementType: "all",
    stylers: [{
        visibility: "on"
    }, {
        gamma: 0.16
    }, {
        saturation: -93
    }, {
        lightness: -75
    }]
}, {
    featureType: "poi",
    elementType: "all",
    stylers: [{
        visibility: "off"
    }]
}, {
    featureType: "administrative",
    elementType: "all",
    stylers: [{
        invert_lightness: true
    }]
}, {
    featureType: "road.arterial",
    elementType: "labels",
    stylers: [{
        visibility: "off"
    }]
}, {
    featureType: "road.highway",
    elementType: "labels",
    stylers: [{
        visibility: "off"
    }]
}, {
    featureType: "transit",
    elementType: "all",
    stylers: [{
        visibility: "off"
    }]
}, {
    featureType: "road",
    elementType: "all",
    stylers: [{
        hue: mycolor
    }, {
        saturation: 16
    }, {
        lightness: -49
    }]
}, {
    featureType: "administrative",
    elementType: "all",
    stylers: [{
        saturation: 25
    }, {
        lightness: -40
    }, {
        hue: mycolor2
    }]
}];

var mapstyle_id = 'minimal';
var mapOptions = {
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, mapstyle_id]
    },
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_LEFT
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    zoom: 6,
    disableDoubleClickZoom: true,
    backgroundColor: mybg_color
};


$("#map_2").mosne_map({
    elements: '#map_2_list .maplocation',
    showzoom: true,
    timeout: 100,
    clat: 41.895466,
    clng: 12.482324,
    clickedzoom: 14,
    mapstyle: stylez,
    mapstyle_name: mapstyle_id,
    map_opt: mapOptions,
    cluster_styles: {
        zoomOnClick: true,
        maxZoom: 13,
        gridSize: 30,
        styles: cluster_styles
    },
    marker_icon: marker_icon

});

Map3: geocoding

Link

foo

via , 00100 roma, italia

Hello world!

<div id="map_3" class="mapbox"></div>
<div class="maplocation">
  <h2><a href="#" class="maplink">Link 1</a></h2>
  <div class="infobox">
    <h2 class="name">Link 1</h2>
    <p class="address">via casilina 11, 00100 roma, italia</p>
    <p>Hello world!</p>
   </div>
</div>
 $("#map_3").mosne_map({mode:'address',elements:'#map_3_list .maplocation'});

Map4: Events

zoom level: 0
total locations: 0
" data-lng="">

Link

foo

Hello world!

    $("#map_4").bind("showzoom", function (e, zoom) {
        $("#zoom").html(zoom);
    });

    $("#map_4_list .maplocation").bind('aj_open', function (e) {
        $(this).append('<div class="pd">do something fun!</div>');
        return false;
    });

    $("#reset").click(function (e) {
        e.preventDefault();
        $("#map_4").trigger("bounds");
    });

    $("#up").click(function (e) {
        e.preventDefault();
        $("#map_4_list .maplocation:odd").remove();
        $("#map_4").trigger("update");
    });

    var counter = function () {
        tot_p = $("#map_4 .maplocation").length;
        $("#tot").html(tot_p);
    }

    $("#map_4").mosne_map({
        elements: '#map_4_list .maplocation',
        showzoom: true,
        trigger: 'aj_open',
        clickedzoom: 14,
        infowindows: false, //do not use infoWindow
        afterUpdate: counter
    });

Map5: Categories

" data-cat="" data-lng="">

Link

foo 

<div class="maplocation" data-name="Link 1"  data-lat="41.10" data-lng="13.29" data-cat="red">
var my_cat_style ={
    red:    { icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=R|cc0000|FFFFFF'},
    green:  { icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=G|00cc00|333333'},
    blue:   { icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|2222cc|FFFFFF'}, 
    aqua:   { icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00cccc|333333'}
    };
        
    $("#map_5").mosne_map({
        elements: '#map_5_list .maplocation',
        cluster_styles: {
            zoomOnClick: true,
            maxZoom: 3,
            styles: cluster_styles
        },
        cat_style: my_cat_style    
    });

Map6: custom infoWindows

" data-lng="">

Link

this is so !

<div class="infobox">
    <div class="m_tooltip">
        <p>this is so yesterday!</p>
    </div>
</div>
.m_tooltip{
	position: absolute;
	text-align: center;
	left: 0;
	top: 0;
	z-index: -2;
	color: #FFFFFF;
    float: left;
    margin-top: 10px;
    padding: 10px;
    width: 260px;
    border: 1px solid #313436;
    text-shadow: 0px 0px 3px #000;
       -moz-border-radius: 5px;  
    -webkit-border-radius: 5px; 
            border-radius: 5px; 
       -moz-box-shadow: 0px 1px 2px #000; 
    -webkit-box-shadow: 0px 1px 2px #000;
            box-shadow: 0px 1px 2px #000;
  	background-color: #313436;
    background-image: -webkit-linear-gradient(top, #313436, #222526); 
    background-image:    -moz-linear-gradient(top, #313436, #222526);
    background-image:     -ms-linear-gradient(top, #313436, #222526); 
    background-image:      -o-linear-gradient(top, #313436, #222526); 
    background-image:         linear-gradient(top, #313436, #222526);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#313436', EndColorStr='#222526');
    }

$("#map_6").mosne_map({
        elements: '#map_6_list .maplocation',
        infowindows: false,                     // do not use infoWindow
        infobox: true,                          // use infobox instead
        cluster_styles: {
            zoomOnClick: true,
            maxZoom: 3,
            styles: cluster_styles
        },
        marker_icon:'images/m_red.png'
    });

Options

defaults = {
            elements: '#list .maplocation', //links selector
            map_opt: baseconf,              // custom map options object
            clat: 41.895466,                // set the lat default map center
            clng: 12.482324,                // set the lng default map center
            mapstyle_name: '',              // custom map style label and id
            mapstyle: '',                   // mapstyle object
            cluster_styles: {},             // custom cluster icons object
            marker_icon: '',                // custom marker icon url
            infowindows: true,              // shows infoWindows grabing html from the .infobox element
            infobox: false,                 // enable custom infoWindows using infobox class
            infobox_s: s_infobox,           // default color scheme for custom infobox container
            trigger: 'map_open',            // you can set a event trigger for each link/marker
            clickedzoom: 15,                // set the zoom level when you click the single marker
            timeout: 100,                   // delay between click and zoom on the single marker
            mode: 'latlng',                 // switch mode
            wait: 500,                      // timeout between geocode requests
            cat_style: {},                  // costum icons and click zoom level
            fitbounds: true,                // on|off fit bounds
            showzoom: false,                // bind current map zoom level event
            before: function () {},         // before create map callback
            after: function () {},          // after create map callback 
            afterUpdate: function () {}     // after update map callback
        };

Download

this project is under GNU General Public License

Tools

Thanks