aleveille92 / googlemap-manager

googlemap-manager

Usage

1. Add the latest googlemap-manager javascript file

<script src="/path/to/googlemap-manager.js"></script>

<!-- optional -->
<!-- required if markers.cluster is used  -->
<script src="/path/to/markerclusterer.js"></script>
<!-- required if markers.infoBubble is used  -->
<script src="/path/to/infobubble.js"></script>

2. Create a element with an unique ID

<div id="myCustomMap"></div>

3. Initialize a new GoogleMapManager instance

var newMap = new GoogleMapManager('myCustomMap', {
    // Settings
});

Settings

Name	Type	Description
googleMap	object	Support all the same options as a normal google map.
markers	object	An object regrouping all the below settings.
markers.closeOthers	boolean Default:true	Determine if all other markers should close when a new one is opened.
markers.cluster	object	When use enable the markerclusterer.js extension. Support all the options of the plugin.
markers.infoBubble	object	When use enable the infobubble.js extension. Support all the options of the plugin.
styles	object	An object representing the colors and elements to show on the map. Can be generated online on a site like Snazzy Maps.

Methods

newMap.addMarker({
    id: 1,
    title: "My marker",
    lat: 45,
    lng: -73,
    template: "<div>Content of the infowindow...</div>",
    categories: ["sushi"]
});

Name	Options	Description
on	eventName, callback	Listen to an event by name
zoomIn	number optional	Increase the zoom by the amount specified.
zoomOut	number optional	Decrease the zoom by the amount specified.
boundZoom	-	Set the zoom of the map so that all markers fit in the view.
addMarker	id:number title:string lat:number lng:number icon:path template:string categories:array	Add a marker to the map. If no template is passed the title will be used.
getMarker	id	Retrieve a marker by ID.
showMarker	id or marker	Make the marker visible on the map.
hideMarker	id or marker	Make the marker invisible on the map.
openMarker	id or marker	Open the infowindow associated to the marker.
filterMarkers	category	Show only the marker that have the category.
getInfowindow	id	Retrieve an infowindow by marker ID.
trigger	EventName, data	Trigger an event by name

Events

All the event receive the manager has this. Example:

newMap.on('markerOpened', function(marker) {
    this.zoomIn();
    this.map.panTo(marker.getPosition());
});

Name	Callback	Description
markerOpened	(marker)	Triggered when the marker infowindow as been opened.
markerClosed	(marker)	Triggered when the marker infowindow as been closed.
boundZoomed	-	Triggered when the method boundZoom is called.