Skip to content

dansdom/plugins-googlemap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 

Repository files navigation

Googlemap Plugin - v1.2

v 1.0	- basic functionality, custom pins, custom events, markerclusterer plugin, map options and info windows
v 1.1	- fixed bug with geolocation
		- added option to 'track' the user on the map. this will add a center pin, on a given time period it will update the maps center position
		- fixed issues with the definition of the center pin. now you can define your own center pin
		- renaming a few variables so that they make a little more sense
		- combined mapCenter and trackLocation variables :)
v 1.3	- added an option in the pin to add a custom function for that pin which is not a map event. Originally for changing the pin marker image on the fly.
		- the first thing is the pass the pin through, then maybe pass some options

This plugin allows a developer to drop in a generic googlemap into any page very easily.
There are a number of default map settings, but they can be overwritten and added to depending on the map requirements.
You can set the center of the map, and a pin on the centre too.
There are options to have custom pins.
The markers are defined as an array of pins. 
Each pin object has a title, lat, lng, custom pin reference, and an infoWindow HTML string.
Implementation is as easy as:
			$(document).ready(function(){
				$("#mapPane").MapMe({
				    options: go here
				});				
			});


Custom Pin:
for each custom pin the setting can be turned off by using "false", 
required: lat and lng
example of a custom pin:
{
	title: 'Bondi Beach', 
	lat: -33.890542, 
	lng: 151.274856, 
	pin: "myCustomPin", 
	infoWindow: "<h1>Bondi Info Window Content</h1><p>lorem ipsum</p>",
	pinEvent: {
		'click': function(){alert("you clicked me!");},
		'mouseover' : function(){console.log("you moused over me!");}},
		pinFunction: {foo();}
}

if markerCluster is set to true, then the markers on the page will be clustered using the marker cluster script.
this script needs to be included in the HTML
these clusters can be styled using the markerClusterOptions object.

Styles for marker clusters:
	'gridSize': (number) The grid size of a cluster in pixels.
  	'maxZoom': (number) The maximum zoom level that a marker can be part of a cluster.
  	'zoomOnClick': (boolean) Whether the default behaviour of clicking on a cluster is to zoom into it.
	'averageCenter': (boolean) Wether the center of each cluster should be the average of all markers in the cluster.
	'minimumClusterSize': (number) The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
	'styles': (object) An object that has style properties:
			'url': (string) The image url.
			'height': (number) The image height.
			'width': (number) The image width.
			'anchor': (Array) The anchor position of the label text.
			'textColor': (string) The text color.
			'textSize': (number) The text size.
			'backgroundPosition': (string) The position of the backgound x, y.  

About

an easy to use googlemap plugin that drops a googlemap onto the page

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published