[](https://flattr.com/submit/auto?user_id=stojanovicdeja&url=https://github.com/dejanstojanovic/JQuery-GoogleMaps&title=jQuery GoogleMaps&language=&tags=github&category=software)

jQuery GoogleMaps Editor/Viewer

JQuery plugin wrapper around GoogleMaps API for easier use of GoogleMaps on web sites and back-end web pages

The purpose of this JQuery plugin is to enable using GoogleMaps on a page in a JQuery style. It is a wrapper around GoogleMaps API v3 which alow to easily add interactively customize GoogleMaps for displaying or editing locations whether they are represented as ping or shapes.

###What can I do with it The main purpose of this plugin is to enable easy adding locatins and polygons to a GoogleMap, easy saving of map state and easy loading saved map state with locations again. It runs in two modes:

Editor mode - Allows you to add locations to a map, move them, delete, edit and organize however you want. It is useful for backend applications where you need to organize your locations easily and easily save your work. The map stage is saved in JSON format and can be easily reused after saving.
Viewer mode - This mode designed is for frontend use. It alows you to load and display previously saved work from editor mode of plugin.

More about how to set modes, check in plugin options list.

###How to add to a page Plugin will pull and refernce GoogleMaps API automatically by itself based on options you used when you initialized plugin. All you need to do is to reference JQuery library, plugin library and plugin stylesheet (if you are going to use it for map editing).

In case you are using plugin only for displaying the data it is not required to reference plugin css file.

<link rel="stylesheet" type="text/css" href="../src/css/mapstyle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.googlemaps.js"></script>

For ASP.NET developers it is available as a NuGet Package at NuGet Gallery or direcly from NuGet package manager/console

PM> Install-Package JQuery.GoogleMaps

###How to use it For start checkout the following CodePen samples to see how to use it.

###What are options for plugin There is a long list of options for the plugin initialization. You do not need to provide all the values as every option has it's own default value. Only in case you want to change the default value of option you specify it. The following is the list of options exposed in plugin initializing.

Name	Default value	Description
mapFile	null	File path or URL from which to load the map content from
editMode	true	Determines whether map and locations on it will be editable or not. Basically it is a switch between editor and viewer
editTemplatesPath	"../src/html/"	Folder URL where html temple files for location editing are stored
markerPinsPath	"../src/img/pin/"	Folder URL where marker pin images are stored
markerPinFiles	["flag-azure.png", "flag-green.png", "needle-pink.png", "niddle-green.png", "pin-azure.png", "pin-green.png", "pin-pink.png"]	Files in marker pins folder which will be used for editing. Value markerPinsPath will be concatenated to a filename to display it on the map
drawingBorderColor	"#ff0000"	Drawing border color for map drawing tools
drawingBorderWidth	2	Default border width for map drawing tools
drawingFillColor	"#ffff00"	Drawing fill color for map drawing tools
zoom	13	Initial zoom level of map
center		Initial map center coordinates
width	800	Width of map
height	400	Height of map
language	"en"	Language of the map
singleLocation	false	If true then only ine location is allowed to be added. Before adding map will be cleared. If set to false, multiple locations can be added to map
searchBox	true	Show or hide search box on map
richtextEditor	true	Use TinyMce editor for editing location messages
drawingTools	["marker", "polyline", "polygon", "circle", "rectangle"]	List of drawing tools to be dandled on map in edit mode
zoomControl	true	Show zoom control on map
panControl	true	Show pan control on the map
scaleControl	true	Show scale control on the map
streetViewControl	true	Show streetview control on the map
scrollWheel	false	Use scroll wheel to zoom map
locations	[]	List of location on the map to be loaded to map when initialized. Main purpose is to store previously saved map locations
stylesPath	"../src/styles.json"	Url to styles.json with predefined styles
style		Custom map style (custom styles can be found at snazzymaps.com)

Based on requrements, more plugin settings will be added in future plugin versions

###Plugin events There are several events implemented so far, but as the requirements grow new will be added. Curently implemented events are the following:

dataChange(map, result) - Raised whenever something is changed on map stage. Returns map instance and map data in JSON format
locationClick(map, location) - Raised when location on map is clicked. Returns map instance and location which is clicked
locationNew(map, location) - Raised when location on map is added. Returns map instance and location which is added
locationDelete(map, location) - Raised when location on map is removed. Returns map instance and location which is removed from map
locationMove(map, location) - Raised when location on map is moved. Returns map instance and location which is moved

###There is some richtext editor mentioned Yes, this plugin provides you adding location popup messages in a richtext. Plugin relyes on two more additional plugins:

TinyMce is dynamically loaded by plugin itself based on options you set when you initialize plugin. Simple color picker plugin is included in this plugin library js file and it is used in edit mode for color picking for browsers which do not support HTML5 color input.

###Using it in ASP.NET MVC To make life easier for all developers who use ASP.NET MVC, I created a separate project which deals with serialization/deserialization and adding the plaugin in ASP.NET MVC style to web projects.

Complete guide how to use it in MVC views ia available on GitHub project page as well as a complete code.

NuGet package for ASP.NET MVC is available from NuGet Gallery or direcly from NuGet package manager/console

PM> Install-Package MVC.GoogleMaps

dejanstojanovic/jQuery-GoogleMaps

jQuery GoogleMaps Editor/Viewer