{ mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 1}
{}
{ strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4}
{ travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false}
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 objectvar maplace = new Maplace();//add the new menu with the method AddControl(name, function)maplace.AddControl('checks', html_checks);//load the mapmaplace.Load({ controls_type: 'checks', locations: [{...}, {...}]});