A repository of over 1000 quality jQuery plugins

jQuery Maplace JS

Maplace JS is a jQuery Maps plugin.

Created by Danielemoraschi

A Google Maps Javascript plugin for jQuery.

Not what you're looking for? Click here to view more Maps jQuery plugins

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

OptionTypeDefaultDescription
map_divstring#gmap Where you want to show the Map
controls_divstring#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_controlsbooleantrue If false, the menu will not generated
controls_typestringdropdown To set the menu type choose between: dropdown | list
controls_on_mapbooleantrue If false, the menu will be generated into the element defined by the property controls_div
controls_titlestring Add a title/header text to the menu
controls_cssclassstring Add a custom class to the menu element
controls_applycssbooleantrue If false, default styles to the menu will not be applied
controls_positionstring'RIGHT_TOP' Controls position on the right, below top-right elements of the map.
typestringmarker To set the Map type choose between: marker | polyline | polygon | directions | fusion
view_allbooleantrue If false the link "view all" will not be created
view_all_textstringView All Set a custom text for the link "view all"
startinteger0 Set the first location to show, 0 stands for "view all"
locationsArray [locations][] List of locations being marked on the map
commonsobject{} Overwrite every location with a set of common properties
show_markersbooleantrue If false, markers will not be visible on the map
show_infowindowsbooleantrue If false, infowindows will not be created
infowindow_typestringbubble Only bubble is supported
map_optionsObject {
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
stylesObject{} Style options as defined by Google
stroke_optionsObject {
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_optionsObject {
travelMode: 'DRIVING',
unitSystem: 'METRIC',
optimizeWaypoints: false,
provideRouteAlternatives: false,
avoidHighways: false,
avoidTolls: false
}
Direction options object, as defined by Google
directions_panelstringnull ID or class of the div in which to display the directions steps.
fusion_optionsObject{} Fusion tables options as defined by Google
draggablebooleanfalse If true, allows the user to drag and modify the route, the polyline or the polygon
listenersObject{}Example:
listeners: {
click: function(map, event) {
map.setOptions({scrollwheel: true});
}
}
Docs: Google maps Events

Methods

FunctionParamsReturnDescription
AddControlstring [name], functionAdd you own menu type to the map
CloseInfoWindowClose the current infowindow
ShowOnMenuinteger [index]booleanChecks if a location has to be shown on menu
ViewOnMapinteger [index]Triggers to show a location on map
SetLocationsarray [locations], boolean [reload]Replace the current locations
AddLocationsarray [locations] | object [location], boolean [reload]Adds one or many locations
AddLocationobject [location], integer [index], boolean [reload]Adds one location at the specific index
RemoveLocationsarray [indexes] | integer [index], boolean [reload]Delete one or many locations
Loadnull | boolean | object [options]Loads, updates the current options or force to reload the current options and construct the map
LoadedChecks if a Load() was already been called

Events

OptionTypeDefaultDescription
beforeViewAllfunction Fires before showing all the locations
afterViewAllfunction Fires after showing all the locations
beforeShowfunction(index, location, marker){} Fires before showing the current triggered location
afterShowfunction(index, location, marker){} Fires after showing the current triggered location
afterCreateMarkerfunction(index, location, marker){} Fires after a marker creation
beforeCloseInfowindowfunction(index, location){} Fires before closing the infowindow
afterCloseInfowindowfunction(index, location){} Function called after closing the infowindow
beforeOpenInfowindowfunction(index, location, marker){} Fires before opening the infowindow
afterOpenInfowindowfunction(index, location, marker){} Fires after opening the infowindow
afterRoutefunction(distance, status, result){} Fires after the route calcoule
onPolylineClickfunction(obj) {} Fires when click on polylines
circleRadiusChangedfunction(index, location, marker){} This event is fired when the circle's radius is changed.
circleCenterChangedfunction(index, location, marker){} This event is fired when the circle's center is changed.
dragfunction(index, location, marker){} This event is fired while a marker is dragged.
dragEndfunction(index, location, marker){} This event is fired when the drag event ends.
dragStartfunction(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.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


You might also like these other Maps jQuery Plugins

  • ImageMaps

    jquery plugin which can be partially linked to the image

  • geoInput

    Geolocation input type for html forms. jQuery plugin. Requires on Google Maps v3 API and, for reverse geocoding, an API […]

  • Mapsed

    Google Maps & Places jQuery plug-in