Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/danielemoraschi/maplace.js

A Google Maps Javascript plugin for jQuery.
https://github.com/danielemoraschi/maplace.js

google-maps google-maps-api javascript jquery maps markers

Last synced: about 1 month ago
JSON representation

A Google Maps Javascript plugin for jQuery.

Lists

README 

        
# Maplace.js [![Build Status](https://travis-ci.org/danielemoraschi/maplace.js.svg)](https://travis-ci.org/danielemoraschi/maplace.js) - currently unmaintained

Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.



## Demo

See **[demo website](http://maplacejs.com/)**



## Setup

Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.



### JS

```javascript

new Maplace({

	locations: data,

	controls_type: 'list',

	controls_on_map: false

}).Load();

```



### HTML

```html





```



### Locations Array

```javascript

var data = [{

	    lat: 45.9,

	    lon: 10.9,

	    title: 'Title A1',

	    html: '
Content A1
',

	    zoom: 8,

	    icon: 'http://www.google.com/mapfiles/markerA.png'

	},{

	    lat: 44.8,

	    lon: 1.7,

	    title: 'Title B1',

	    html: '
Content B1
',

	    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



	

	  

	    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**

- Fixed #161

- Fixed #160



**v0.2.7**

- Fixed #132

- Fixed #127



**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