https://github.com/patricknelson/jquery.googlemap.multi

Updated Google Maps API for multiple locations.
https://github.com/patricknelson/jquery.googlemap.multi

Last synced: 25 days ago
JSON representation

Updated Google Maps API for multiple locations.

• Host: GitHub
• URL: https://github.com/patricknelson/jquery.googlemap.multi
• Owner: patricknelson
• License: mit
• Created: 2014-04-24T14:48:02.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-24T16:00:54.000Z (over 10 years ago)
• Last Synced: 2024-05-17T00:19:10.094Z (6 months ago)
• Language: JavaScript
• Size: 141 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
jquery.googleMap.Multi

======================

Updated Google Maps API for multiple locations.

## Usage: ##

**Note:** See the [Google Maps JS API documentation](https://developers.google.com/maps/documentation/javascript/styling?csw=1) for more information on using styles.

	$(function() {

	    $(".map").googleMap({

			// Options: "roadmap", "satellite", "hybrid" or "terrain".

			mapType: "roadmap",

			

			// URL to file containing JSON encoded data on map points.

	    	url: "data.json",

			// Map Styles. See the Google Maps JS API documentation for more information on using styles.

			// https://developers.google.com/maps/documentation/javascript/styling

	    	styles: [

				{

					"featureType": "landscape",

					"stylers": [

						{

							"color": "#efefef"

						}

					]

				}

			]

	    });

	

	});

## Example JSON Data: ##

The JSON below allows you to define define a set of points. You can provide multiple sets and then indicate which set (via "initialset") should be displayed first.

	{

		"initialset": "set1",

		"sets": [

			{

				"setid": "set1",

				"bounds": null,

				"points": [

					{

						"latlng": ["32.2926", "-64.7822"],

						"content": "Example Title 1<\/strong>
Example Text 1",

						"icon": "images/icon.png",

						"zoom": "10"

					}

				]

			},

			{

				"setid": "set2",

				"bounds": null,

				"points": [

					{

						"latlng": ["40.7146", "-74.0066"],

						"content": "Example Title 2<\/strong>
Example Text 2",

						"icon": "images/icon.png",

						"zoom": "10"

					}

				]

			}

		]

	}


**Note:** Currently there is no way to customize how to switch between sets of map points (an API to do this will need to be done, see `TODO` below). For now, use the example code below to define the buttons used to switch between each set.

    Set 1

    Set 2

## TODO: 

* Define an API to allow switching between each set.