jQuery Map Marker Plugin

jQuery Map Marker Plugin makes it easy to put multiple markers on Map using Google Map API V3.
Map Marker is very useful when you have a list of data & you want to show all of them on Map too.


Like most of the jQuery plugins, this plugin is very straight forward to setup.
It has some nice options & uses JSON formatted data for every Locations.

Also make note that you must have to pass the Location values using Lattitude & Longitude co-ordinates of the that Location (due to Google map API limitation).

Below steps will make more sense of using this plugin.

Step-1 : Include necessary JS files in your <head> tag

Step-2 : Create a Map container using div tag & give it an ID in your html body

Step-3 : Apply the Plugin to the Map element using below code. Put the code before closing </head>tag

myMarker : We have used this variable to store JSON data of each locations. Each locations will include 4 entities.
1. latitude – latitude of the location
2. longitude – longitude of the location
3. icon – a custom icon to display on map as marker (16 x 16 pixels size)
4. baloon_text – a Text to display in a Baloon on map when clicked on that specific Marker. You can also use this text in HTML format. Make sure you use single quotes(‘) only for HTML format baloon text.

Use below link if you want to get latitude & longitude

Additionally, there are 2 more options which you can set on Map.
1. zoom – to set default zoom level of the Map. Increase the value to zoom-in & Decrease the value to zoom-out
2. center – to specify the center location of the Map. Make sure the center location address you enter is spelled properly.
3. markers – this will be simply the Markers variable we created, here it is “myMarkers”

Step-4 : That’s All

I have tested the plugin on Windows with Chrome, FF 3.6, IE 6, IE 8, Safari 4.

View Demo | Download