Maplace.js 
Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.
Demo
See demo website
Setup
Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.
JS
new Maplace({ locations: data, controls_type: 'list', controls_on_map: false }).Load();HTML
<div id="controls"></div> <div id="gmap" style="with:300px;height:250px;"></div>Locations Array
var data = [{ lat: 45.9, lon: 10.9, title: 'Title A1', html: '<h3>Content A1</h3>', zoom: 8, icon: 'http://www.google.com/mapfiles/markerA.png' },{ lat: 44.8, lon: 1.7, title: 'Title B1', html: '<h3>Content B1</h3>', show_infowindow: false } ];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 |
| 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 | string | 'RIGHT_TOP' | Controls position on the right, below top-right elements of the map. |
| 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 |
| 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 |
| map_options | Object | { | Map options object, 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 | { | Stroke options object, as defined by Google. Used in Polyline/Polygon/Directions/Fusion Map type. |
| directions_options | Object | { | Direction options object, 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, allows the user to drag and modify the route, the polyline or the polygon |
| listeners | Object | {} | Example: listeners: { Docs: Google maps Events |
Methods
| Function | Params | Return | Description |
|---|---|---|---|
| AddControl | string [name], function | Add you own menu type to the map | |
| 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 | boolean | object [options] | Loads, updates the current options or force to reload the current options and construct the map | |
| Loaded | Checks if a Load() was already been called |
Events
</tbody> | 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. |
Requirements
Maplace.js requires jQuery and Google Maps Library v3.
Source code
All efforts have been made to keep the source as clean and readable as possible.
Maplace.js is released under an MIT License.
Changelog
v0.2.10
- Fixed
afterRoutenot passing status or location with draggable #147 and #139 - Added listener for 'insert_at' polygon events #164
v0.2.9
- Fixed #137
- All event functions are now scoped to the current Maplace instance object
v0.2.8
v0.2.7
v0.2.0
- Updated to jQuery ~2.1
- Source directory for the build moved from "src" to "dist"
- Use Grunt tasks to generate distribution artifacts
- Changed default border color for in-map menu panel to match with Google Maps new UI
- Updated package.json and bower.js
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.2
- General fixes and enhancements
v0.1.0
- Initial release
