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.
var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load();
<div id="gmap"></div>
//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();
<div id="gmap-dropdown"></div> <div id="gmap-list"></div>
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();
<div id="gmap-circles"></div>
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();
<div id="controls-tabs"></div> <div id="info"></div> <div id="gmap-tabs"></div>
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();
<div id="controls-polyline"></div> <div id="gmap-polyline"></div>
new Maplace({
locations: LocsA,
map_div: '#gmap-polygon',
controls_div: '#controls-polygon',
controls_type: 'list',
show_markers: false,
type: 'polygon',
draggable: true
}).Load();
<div id="gmap-polygon"></div>
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();
<h2>Route <strong id="km"></strong></h2> <div id="gmap-route"></div> <div id="route"></div>
More Google Maps styles on the website: Snazzy Maps
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();
<div id="gmap-styled"></div>
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);
<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>
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();
<div id="gmap-fusion"></div>
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();
});
});
<div id="panel">
<a class="button" id="load_bigdata" href="#">load 4k points</a>
</div>
<div id="gmap-big" style="display:none"></div>
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>
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>
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();
| 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
|
| 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 |
| 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. |
| 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 |
var LocsA = [
{
lat: 45.9,
lon: 10.9,
title: 'Title A1',
html: '<h3>Content A1</h3>',
icon: 'http://maps.google.com/mapfiles/markerA.png',
animation: google.maps.Animation.DROP
},
{
lat: 44.8,
lon: 1.7,
title: 'Title B1',
html: '<h3>Content B1</h3>',
icon: 'http://maps.google.com/mapfiles/markerB.png',
show_infowindow: false
},
{
lat: 51.5,
lon: -1.1,
title: 'Title C1',
html: [
'<h3>Content C1</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8,
icon: 'http://maps.google.com/mapfiles/markerC.png'
}
];
var LocsAv2 = [
{
lat: 45.9,
lon: 10.9,
title: 'Zone A1',
html: '<h3>Content A1</h3>',
type : 'circle',
circle_options: {
radius: 200000
},
draggable: true
},
{
lat: 44.8,
lon: 1.7,
title: 'Draggable',
html: '<h3>Content B1</h3>',
show_infowindow: false,
visible: true,
draggable: true
},
{
lat: 51.5,
lon: -1.1,
title: 'Title C1',
html: [
'<h3>Content C1</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8,
visible: true
}
];
var LocsB = [
{
lat: 52.1,
lon: 11.3,
title: 'Title A2',
html: [
'<h3>Content A2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8
},
{
lat: 51.2,
lon: 22.2,
title: 'Title B2',
html: [
'<h3>Content B2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8
},
{
lat: 49.4,
lon: 35.9,
title: 'Title C2',
html: [
'<h3>Content C2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 4
},
{
lat: 47.8,
lon: 15.6,
title: 'Title D2',
html: [
'<h3>Content D2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 6
}
];
var LocsBv2 = [
{
lat: 52.1,
lon: 11.3,
title: 'Title A2',
html: [
'<h3>Content A2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8
},
{
lat: 51.2,
lon: 22.2,
title: 'Title B2',
html: [
'<h3>Content B2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8,
type : 'circle',
circle_options: {
radius: 100000
}
},
{
lat: 49.4,
lon: 35.9,
title: 'Title C2',
html: [
'<h3>Content C2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 4
},
{
lat: 47.8,
lon: 15.6,
title: 'Title D2',
html: [
'<h3>Content D2</h3>',
'<p>Lorem Ipsum..</p>'
].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: '<h3>Milan, Italy</h3>'
},
{
lat: 47.36854,
lon: 8.53910,
title: 'Zurich, Switzerland',
html: '<h3>Zurich, Switzerland</h3>',
visible: false
},
{
lat: 48.892,
lon: 2.359,
title: 'Paris, France',
html: '<h3>Paris, France</h3>',
stopover: true
},
{
lat: 48.13654,
lon: 11.57706,
title: 'Munich, Germany',
html: '<h3>Munich, Germany</h3>'
}
];
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.'
}
];
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: [{...}, {...}]
});