Skip to content

Latest commit

 

History

History
572 lines (551 loc) · 14.4 KB

README.md

File metadata and controls

572 lines (551 loc) · 14.4 KB
Raw

Maplace.js Build Status

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 {
mapTypeId: google.maps.MapTypeId.ROADMAP, //or roadmap
zoom: 1
} 		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 {
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.4
} 		Stroke options object, as defined by Google.
Used in Polyline/Polygon/Directions/Fusion Map type.
directions_options Object {
travelMode: 'DRIVING',
unitSystem: 'METRIC',
optimizeWaypoints: false,
provideRouteAlternatives: false,
avoidHighways: false,
avoidTolls: false
} 		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: {
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
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 afterRoute not 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