Maplace.js - A Google Maps javascript plugin for jQuery.

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.
It requires jQuery and Google Maps API v3 so you need to have both in your page.

Features

Straightforward implementation with simple options
Can run as many maps as required
Markers and custom icons, zoom level and custom controls menu
Supports for Directions, Polygons, Polylines, Fusion tables and styled maps
Works in all major browsers, including IE6 (this website not so much)
Released under the MIT license

Download

maplace-0.1.3.js (38.81KB)

maplace-0.1.3.min.js (16.79KB)

Hello, World

Example

Code

JS

var maplace = new Maplace(); 
maplace.Load(); 
// or new Maplace().Load();

Html

<div id="gmap"></div>

Markers

Example

Code

JS

//dropdown example
new Maplace({
    locations: LocsA,
    map_div: '#gmap-dropdown',
    controls_title: 'Choose a location:'
}).Load();

//ul list example
new Maplace({
    locations: LocsB,
    map_div: '#gmap-list',
    controls_type: 'list',
    controls_title: 'Choose a location:'
}).Load();

Html

<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>

Circles

Example

Code

JS

new Maplace({
    locations: Circles,
    map_div: '#gmap-circles',
    start: 4,
    view_all_text: 'Points of interest',
    type: 'circle',
    shared: {
        zoom: 16,
        html: '%index'
    },
    circleRadiusChanged: function(index, point, marker) {
      $('#radiusInfo').text(
        ' - point #' + (index+1) + ' size: ' + parseInt(marker.getRadius()) + 'mt.'
      );
    }
}).Load();

Html

<div id="gmap-circles"></div>

Tabs

Example

Code

JS

new Maplace({
    locations: LocsB,
    map_div: '#gmap-tabs',
    controls_div: '#controls-tabs',
    controls_type: 'list',
    controls_on_map: false,
    show_infowindow: false,
    start: 1,
    afterShow: function(index, location, marker) {
        $('#info').html(location.html);
    }
}).Load();

Html

<div id="controls-tabs"></div>
<div id="info"></div>
<div id="gmap-tabs"></div>

Path / Polyline + mixed circles

Example

Code

JS

new Maplace({
    locations: LocsAv2,
    map_div: '#gmap-polyline',
    controls_div: '#controls-polyline',
    controls_type: 'list',
    controls_on_map: false,
    view_all_text: 'Start',
    type: 'polyline'
}).Load();

Html

<div id="controls-polyline"></div>
<div id="gmap-polyline"></div>

Polygon

Example

Code

JS

new Maplace({
    locations: LocsA,
    map_div: '#gmap-polygon',
    controls_div: '#controls-polygon',
    controls_type: 'list',
    show_markers: false,
    type: 'polygon',
    draggable: true
}).Load();

Html

<div id="gmap-polygon"></div>

Route:

Example

Route

Code

JS

new Maplace({
    locations: LocsD,
    map_div: '#gmap-route',
    generate_controls: false,
    show_markers: false,
    type: 'directions',
    draggable: true,
    directions_panel: '#route',
    afterRoute: function(distance) {
        $('#km').text(': '+(distance/1000)+'km');
    }
}).Load();

Html

<h2>Route <strong id="km"></strong></h2>
<div id="gmap-route"></div>
<div id="route"></div>

Styled
More Google Maps styles on the website: Snazzy Maps

Example

Code

JS

new Maplace({
    map_div: '#gmap-styled',
    locations: LocsAB,
    start: 1,
    styles: styles,
    map_options: {
        zoom: 5
    }
    styles: {
        'Night': [{
            featureType: 'all',
            stylers: [
                { invert_lightness: 'true' }
            ]
        }],
        'Greyscale': [{              
            featureType: 'all',
            stylers: [
                { saturation: -100 },
                { gamma: 0.50 }
            ]
        }]
    }
}).Load();

Html

<div id="gmap-styled"></div>

Mixed / Ajax

Example

Code

Group A

Group B

Group C

Group D

Group E

JS

var maplace = new Maplace({
    map_div: '#gmap-mixed',
    controls_div: '#controls-mixed',
    controls_type: 'list',
    controls_on_map: false
});

$('#tabs a').click(function(e) {
    e.preventDefault();
    var index = $(this).attr('data-load');
    showGroup(index);
});

function showGroup(index) {
    var el = $('#g'+index);
    $('#tabs li').removeClass('active');
    $(el).parent().addClass('active');
    $.getJSON('data/ajax.php', { type: index }, function(data) {
        //loads data into the map
        maplace.Load({
            locations: data.locations,
            view_all_text: data.title,
            type: data.type,
            force_generate_controls: true
        });
    });
}

showGroup(0);

Html

<ul id="tabs">
    <li><a href="javascript:void(0)" data-load="0" id="g0" title="Group A">Group A</a></li>
    <li><a href="javascript:void(0)" data-load="1" id="g1" title="Group B">Group B</a></li>
    <li><a href="javascript:void(0)" data-load="2" id="g2" title="Group C">Group C</a></li>
    <li><a href="javascript:void(0)" data-load="3" id="g3" title="Group D">Group D</a></li>
    <li><a href="javascript:void(0)" data-load="4" id="g4" title="Group E">Group E</a></li>
</ul>
<div id="controls-mixed"></div>
<div id="gmap-mixed"></div>

Fusion Tables

Example

Code

JS

new Maplace({
    map_div: '#gmap-fusion',
    type: 'fusion',
    map_options: {
        zoom: 2,
        set_center: [31.1, -39.4]
    },
    fusion_options: {
        query: {
            from: '423292',
            select: 'location'
        },
        heatmap: {
            enabled: true
        },
        suppressInfoWindows: true
    }
}).Load();

Html

<div id="gmap-fusion"></div>

Big Data

Example

Code

load 4k locations

JS

bigdata = new Maplace({
    map_div: '#gmap-big',
    show_infowindows: false,
    locations: big4k,
    shared: {
        zoom: 8,
        html: '%index'
    }
});

$('#load_bigdata').click(function(e) {
    e.preventDefault();
    $('#panel').fadeOut('fast', function() {
        $('#gmap-big').fadeIn();
        bigdata.Load();
    });
});

Html

<div id="panel">
    <a class="button" id="load_bigdata" href="#">load 4k points</a>
</div>
<div id="gmap-big" style="display:none"></div>

Requirements

Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="maplace.min.js"></script>

Html

Just place a DIV in your page and give it a unique ID or class, "gmap" by default, but you can change it in the options.

<div id="gmap"></div>

If you want the menu outside of the map you need to include another DIV with a unique ID or class, "controls" by default.

<div id="controls"></div>

JS

Now you can create the map.

<script type="text/javascript">
$(function() {
    new Maplace({
        locations: [{...}, {...}],
        controls_on_map: false
    }).Load();
});
</script>

If you want to center the map on a single location without any marker, you have two options:

new Maplace({
    show_markers: false,
    locations: [{
        lat: 45.9, 
        lon: 10.9,
        zoom: 8
    }]
}).Load(); 

//or

new Maplace({
    map_options: {
        set_center: [45.9, 10.9],
        zoom: 8
    }
}).Load();

Options

Option	Type	Default	Description
map_div	string	#gmap	Where you want to show the Map
controls_div	string	#controls	Where you want to show the menu. generate_controls must be *true* controls_on_map must be *false* At least more than one location on map
generate_controls	boolean	true	If *false*, the menu will not generated
force_generate_controls	boolean	false	Force to generate menu also with one location
controls_type	string	dropdown	To set the menu type choose between: dropdown \| list
controls_on_map	boolean	true	If *false, the menu will be generated into the element defined by the property controls_div*
controls_title	string		Add a title/header text to the menu
controls_cssclass	string		Add a custom class to the menu element
controls_applycss	boolean	true	If *false*, default styles to the menu will not be applied
controls_position	object	google.maps.ControlPosition.RIGHT_TOP	Controls position on the right, below top-right elements of the map. As defined by Google
type	string	marker	To set the Map type choose between: marker \| circle \| polyline \| polygon \| directions \| fusion
view_all	boolean	true	If *false* the link "view all" will not be created
view_all_text	string	View All	Set a custom text for the link "view all"
start	integer	0	Set the first location to show, 0 stands for "view all"
locations	Array <locations>	[]	List of locations being marked on the map. Check the location docs page for more details
shared	object	{}	Overwrite every location with a set of common properties
show_markers	boolean	true	If *false*, markers will not be visible on the map
infowindow_type	string	bubble	Only bubble is supported
visualRefresh	boolean	true	Enable/disable the new google maps look and feel
map_options	Object	{ mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 1 }	Map options as defined by Google. The property center will be ignored. Check at the Install page to see how to center the map with only one location
styles	Object	{}	Style options as defined by Google
stroke_options	Object	{ strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4 }	Stroke options as defined by Google. Used when in Polyline/Polygon/Directions/Fusion/Circle Map type.
directions_options	Object	{ travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false }	Direction options as defined by Google
directions_panel	string	null	ID or class of the div in which to display the directions steps.
fusion_options	Object	{}	Fusion tables options as defined by Google
circle_options	Object	{ radius: 100 }	Default circle options as defined by Google.
draggable	boolean	false	If *true, allow the users to drag and modify the route, the polyline* or the polygon
listeners	Object	{}	Example: listeners: { click: function(map, event) { map.setOptions({scrollwheel: true}); } } Docs: Google maps Events

Methods

Function	Params	Return	Description
AddControl	string <name>, function		Add you own menu type to the map. Check at the Menu Docs page for more details.
CloseInfoWindow			Close the current infowindow
ShowOnMenu	integer <index>	boolean	Checks if a location has to be shown on menu
ViewOnMap	integer <index>		Triggers to show a location on map
SetLocations	array <locations>, boolean <reload>		Replace the current locations
AddLocations	array <locations> \| object <location>, boolean <reload>		Adds one or many locations
AddLocation	object <location>, integer <index>, boolean <reload>		Adds one location at the specific index
RemoveLocations	array <indexes> \| integer <index>, boolean <reload>		Delete one or many locations
Load	null \| object <options>		Loads or updates the current configuration and constructs the map
Loaded			Checks if a Load() was already been called

Events

Option	Type	Default	Description
beforeViewAll	function		Fires before showing all the locations
afterViewAll	function		Fires after showing all the locations
beforeShow	function	(index, location, marker){}	Fires before showing the current triggered location
afterShow	function	(index, location, marker){}	Fires after showing the current triggered location
afterCreateMarker	function	(index, location, marker){}	Fires after a marker creation
beforeCloseInfowindow	function	(index, location){}	Fires before closing the infowindow
afterCloseInfowindow	function	(index, location){}	Function called after closing the infowindow
beforeOpenInfowindow	function	(index, location, marker){}	Fires before opening the infowindow
afterOpenInfowindow	function	(index, location, marker){}	Fires after opening the infowindow
afterRoute	function	(distance, status, result){}	Fires after the route calcoule
onPolylineClick	function	(obj) {}	Fires when click on polylines
circleRadiusChanged	function	(index, location, marker){}	This event is fired when the circle's radius is changed.
circleCenterChanged	function	(index, location, marker){}	This event is fired when the circle's center is changed.
drag	function	(index, location, marker){}	This event is fired while a marker is dragged.
dragEnd	function	(index, location, marker){}	This event is fired when the drag event ends.
dragStart	function	(index, location, marker){}	This event is fired when the drag event starts.

Options

Option	Type	Description
lat	float	Latitude (required)
lon	float	Longitude (required)
title	string	Link title for the menu
html	string	Html content for the infowindow String %index will be replaced with the location index String %title will be replaced with the content of the title
icon	string/uri	Icon for the marker
zoom	integer	Zoom level when focus the marker
show_infowindow	boolean	Force to show or not the infowindow, *true* by default
visible	boolean	If *true, the marker is visible, false* by default
animation	Object	Animation options as defined by Google.
stopover	boolean	Available in type: directions If *true, indicates that this waypoint is a stop between the origin and destination. This has the effect of splitting the route in two. false* by default
stroke_options	Object	Stroke options as defined by Google. Defines the style of the circle specific for each location.
circle_options	Object	Available in type: circle Circle options as defined by Google. Defines the options of the circle specific for each location.
*		Whatever you want to pass and catch in your menu function.
		For other options please refer to Google page

Locations used in the examples

var LocsA = [
    {
        lat: 45.9,
        lon: 10.9,
        title: 'Title A1',
        html: 'Content A1',
        icon: 'http://maps.google.com/mapfiles/markerA.png',
        animation: google.maps.Animation.DROP
    },
    {
        lat: 44.8,
        lon: 1.7,
        title: 'Title B1',
        html: 'Content B1',
        icon: 'http://maps.google.com/mapfiles/markerB.png',
        show_infowindow: false
    },
    {
        lat: 51.5,
        lon: -1.1,
        title: 'Title C1',
        html: [
            'Content C1',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8,
        icon: 'http://maps.google.com/mapfiles/markerC.png'
    }
];

var LocsAv2 = [
    {
        lat: 45.9,
        lon: 10.9,
        title: 'Zone A1',
        html: 'Content A1',
        type : 'circle',
        circle_options: {
            radius: 200000
        },
        draggable: true
    },
    {
        lat: 44.8,
        lon: 1.7,
        title: 'Draggable',
        html: 'Content B1',
        show_infowindow: false,
        visible: true,
        draggable: true
    },
    {
        lat: 51.5,
        lon: -1.1,
        title: 'Title C1',
        html: [
            'Content C1',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8,
        visible: true
    }
];


var LocsB = [
    {
        lat: 52.1,
        lon: 11.3,
        title: 'Title A2',
        html: [
            'Content A2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8
    },
    {
        lat: 51.2,
        lon: 22.2,
        title: 'Title B2',
        html: [
            'Content B2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8
    },
    {
        lat: 49.4,
        lon: 35.9,
        title: 'Title C2',
        html: [
            'Content C2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 4
    },
    {
        lat: 47.8,
        lon: 15.6,
        title: 'Title D2',
        html: [
            'Content D2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 6
    }
];


var LocsBv2 = [
    {
        lat: 52.1,
        lon: 11.3,
        title: 'Title A2',
        html: [
            'Content A2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8
    },
    {
        lat: 51.2,
        lon: 22.2,
        title: 'Title B2',
        html: [
            'Content B2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 8,
        type : 'circle',
        circle_options: {
            radius: 100000
        }
    },
    {
        lat: 49.4,
        lon: 35.9,
        title: 'Title C2',
        html: [
            'Content C2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 4
    },
    {
        lat: 47.8,
        lon: 15.6,
        title: 'Title D2',
        html: [
            'Content D2',
            'Lorem Ipsum..'
        ].join(''),
        zoom: 6
    }
];


var LocsAB = LocsA.concat(LocsB);


var LocsC = [
    {
        lat: 45.4654,
        lon: 9.1866,
        title: 'Milan, Italy',
        type : 'circle',
        circle_options: {
            radius: 1000
        },
        visible: false
    },
    {
        lat: 47.36854,
        lon: 8.53910,
        title: 'Zurich, Switzerland'
    },
    {
        lat: 48.892,
        lon: 2.359,
        title: 'Paris, France'
    },
    {
        lat: 48.13654,
        lon: 11.57706,
        title: 'Munich, Germany'
    }
];

var LocsD = [
    {
        lat: 45.4654,
        lon: 9.1866,
        title: 'Milan, Italy',
        html: 'Milan, Italy'
    },
    {
        lat: 47.36854,
        lon: 8.53910,
        title: 'Zurich, Switzerland',
        html: 'Zurich, Switzerland',
        visible: false
    },
    {
        lat: 48.892,
        lon: 2.359,
        title: 'Paris, France',
        html: 'Paris, France',
        stopover: true
    },
    {
        lat: 48.13654,
        lon: 11.57706,
        title: 'Munich, Germany',
        html: 'Munich, Germany'
    }
];

var Circles = [
    {
        lat: 51.51386,
        lon: -0.09559,
        title: 'Draggable marker',
        circle_options: {
            radius: 160
        },
        stroke_options: {
            strokeColor: '#aaaa00',
            fillColor: '#eeee00'
        },
        draggable: true
    },
    {
        lat: 51.51420,
        lon: -0.09303,
        title: 'Draggable circle',
        circle_options: {
            radius: 50
        },
        stroke_options: {
            strokeColor: '#aa0000',
            fillColor: '#ee0000'
        },
        visible: false,
        draggable: true
    },
    {
        lat: 51.51498,
        lon: -0.09097,
        circle_options: {
            radius: 80
        },
        visible: false,
        draggable: true
    },
    {
        lat: 51.51328,
        lon: -0.09021,
        circle_options: {
            radius: 160,
            editable: true
        },
        title: 'Editable circle',
        html: 'Change my size',
        visible: false,
        draggable: true
    },
    {
        lat: 51.51211,
        lon: -0.09050,
        circle_options: {
            radius: 130
        },
        stroke_options: {
            strokeColor: '#00aa00',
            fillColor: '#00aa00'
        },
        visible: false
    },
    {
        lat: 51.51226,
        lon: -0.09435,
        circle_options: {
            radius: 100
        },
        draggable: true
    },
    {
        lat: 51.513,
        lon: -0.08410,
        type: 'marker',
        title: 'Simple marker',
        html: 'I\'m a simple marker.'
    }
];

Adding a new menu type

This is a simple checkbox menu example. You have to define two methods to make it work: activateCurrent and getHtml
and this variable will be scoped to the current Maplace instance.

var html_checks = {
        //required: called by Maplace.js to activate the current voice on menu
        activateCurrent: function(index) {
                this.html_element.find("input[value='" + index + "']").attr('checked', true);
        },
        //required: called by Maplace.js to get the html of the menu
        getHtml: function() {
                var self = this,
                        html = '';

                //if more than one location
                if(this.ln > 1) {
                        html += '<div class="checkbox controls ' + this.o.controls_cssclass + '">';

                        //check "view all" link
                        //use ShowOnMenu(index) to know if a location has to appear on menu
                        if(this.ShowOnMenu(this.view_all_key)) {
                                html += '<label><input type="radio" name="gmap" value="'
                                         + this.view_all_key + '"/>' + this.o.view_all_text + '</label>';
                        }

                        //iterate the locations
                        for (var a = 0; a < this.ln; a++) {
                                if(this.ShowOnMenu(a)) 
                                    html += '<label><input type="radio" name="gmap" value="' + (a+1) + '"/>' 
                                             + (this.o.locations[a].title || ('#' + (a+1))) + '</label>';
                        }
                        html += '</div>';
                }

                this.html_element = $('<div class="wrap_controls"></div>').append(html);

                //event on change
                //use ViewOnMap(index) to trigger the marker on map
                this.html_element.find('input[type=radio]').bind('change', function() {
                        self.ViewOnMap(this.value); 
                });
                
                return this.html_element;
        }
};

//new Maplace object
var maplace = new Maplace();

//add the new menu with the method AddControl(name, function)
maplace.AddControl('checks', html_checks);

//load the map
maplace.Load({
    controls_type: 'checks',
    locations: [{...}, {...}]
});

v0.1.3
- Added circles support allowing mixed markers/circles
- Removed 'hide_marker' option for consistency with "visible"
- Added support to set the initial center position and zoom of the Map
- Improved editable polyline and polygon when visible markers
- Added drag events between markers, circles, polyline and polygon
- Return "this" for public functions to allow method chaining
- Renamed property 'commons' to 'shared' now overridden by location specific options
- Added external reference to Snazzy Maps website for Google Map styling
- Changed debug strategy
- General fixes and enhancements
v0.1.1
- General fixes and enhancements
v0.1.0
- Initial release

Features

Download

Hello, World

JS

Html

Markers

JS

Html

Circles

JS

Html

Menu

JS

Html

Tabs

JS

Html

Path / Polyline + mixed circles

JS

Html

Polygon

JS

Html

Route:

JS

Html

Styled More Google Maps styles on the website: Snazzy Maps

JS

Html

Mixed / Ajax

JS

Html

Fusion Tables

JS

Html

Big Data

JS

Html

Requirements

Html

JS

Options

Methods

Events

Options

Locations used in the examples

Content A1

Content B1

Content C1

Content A1

Content B1

Content C1

Content A2

Content B2

Content C2

Content D2

Content A2

Content B2

Content C2

Content D2

Milan, Italy

Zurich, Switzerland

Paris, France

Munich, Germany

Adding a new menu type

v0.1.3

v0.1.1

v0.1.0

Styled
More Google Maps styles on the website: Snazzy Maps