A small Google Maps Javascript helper.
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: 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: LocsA,
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>
new Maplace({
map_div: '#gmap-styled',
locations: LocsAB,
start: 3,
styles: {
'Other style': [{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}],
'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> </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>
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 | 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 |
| commons | object | {} | Overwrite every location with a set of common properties |
| show_markers | boolean | true | If false, markers will not be visible on the map |
| show_infowindows | boolean | true | If false, infowindows will not be created |
| 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 in Polyline/Polygon/Directions/Fusion 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 |
| 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 |
| 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, true by default |
| 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 |
| * | Whatever you want to pass and catch in your menu function. | |
| For other options look at the 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'
},
{
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(''),
icon: 'http://maps.google.com/mapfiles/markerC.png'
}
];
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 LocsAB = LocsA.concat(LocsB);
var LocsC = [
{
lat: 45.4654,
lon: 9.1866,
title: 'Milan, Italy'
},
{
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>'
}
];
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: [{...}, {...}]
});