Skip to content

A lightning jQuery plugin that makes easy the use of Google Maps by sending a simple JSON Data Structure.

Notifications You must be signed in to change notification settings

vhugogarcia/vMap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 

Repository files navigation

vMap

A lightning & powerful jQuery plugin with HTML 5 that makes Google Maps v3 easy by sending a simple JSON Data Structure.

vMap not only displays the location markers in the map, but also displays a list with the locations, this list offers some extra features, for example: A location can be clicked and it will be highlighted in the map.

Copyright (c) 2012 Victor Hugo Garcia - [email protected]

How to use

To get started, download the plugin, unzip it and copy files to your website/application directory. Load files in the section of your HTML document. Make sure you also add the jQuery library.

<head>
	<script src="http://maps.googleapis.com/maps/api/js?key=abcdef&sensor=true" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="/jquery.vmap.css" type="text/css"/>
    <script type="text/javascript" src="/jquery.vmap.js"></script>
</head>

Note, you should change key parameter for the one given by Google.

Add the follow HTML to your page under body tag (section tag is optional):

<section>
	<div class="vmap">
		<div class="row">
			<!-- Search Content -->
			<div id="map_search" class="vmap-search">
				<input id="address" class="vmap-address input-control"  type="text" placeholder="Location title..." />
				<input id="search" class="button bg-color-blue" type="button" value="Search" />
			</div>
			<div id="map_directions" class="vmap-directions square">
				<input id="origin" type="text" placeholder="Origin" class="vmap-origin input-control" value="" />
				<input id="destination" type="text" placeholder="Destination" class="vmap-destination input-control" />
				<input id="route" class="button bg-color-blue" type="button" value="GO" />
				<input id="clear" class="button" type="button" value="Clear" />
				<a id="close" class="close" href="#">&times;</a>
			</div>
		</div>
		<div class="row">
			<!--Map content-->
			<div id="map_canvas" class="vmap-canvas pull-left">
			</div>
			<!--Sidebar content-->
			<div id="map_list" class="vmap-list pull-right">
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</section>

Initialize the script like this:

<script>
    $(document).ready(function() {
        $('#map_canvas').vmap({url:"/webservice/get_locations"});
    });
</script>

It can aslo be passed optional options objects which will extend the default values. Example:

<script>
    $(document).ready(function() {
        $('#map_canvas').vmap({
			url: "/webservice/get_locations",
			data: "{'address':'known'}",
			initLatitude: "31.74",
			initLongitude: "-95.42",
			initZoom: 4,
			classAddress: "street",
			classTitle: "title"
        });
    });
</script>

Note, ajax requests are subject to the same origin policy.

Parameters

KeyDefault ValueDescriptionMandatory?
urlEmpty StringA string containing the URL to which the request is sent.Yes
dataEmpty StringData to be sent to the server on the Url specified.No
initLatitude31.74Latitude where the map will be centered initially.No
initLongitude-95.42Longitude where the map will be centered initially.No
initZoom4Initial zoom of the map (integer).No
classAddress'address'Assign a class to the tag where the location address is displayed.No
classTitle'title'Assign a class to the tag where the location title is displayed.No
classPageLink'page-link'Assign a class to the location page link tag.No
classDirectionsLink'directions-link'Assign a class to the location direction link tag.No
showDirectionsLinkfalseHide or show the driving directions links under each location.No
showPageLinkfalseHide or show the location page link under each location.No
showListfalseHide or show the list of locations.No
showSearchfalseHide or show the search bar.No

Server Side

The data must be returned in strict JSON format, below is a sample of the structure:

{
"items": [{
			"Title": "Location Name 01",
			"Link": "/to-some-where.aspx",
			"Latitude": "72.372055",
			"Longitude": "-19.7305979",
			"Address": "1900 Test Road, State, Country, ZipCode"
		}, {
			"Title": "Location Name 02",
			"Link": "/any-where.aspx",
			"Latitude": "72.372055",
			"Longitude": "-19.747201",
			"Address": "1900 Test Road, State, Country, ZipCode"
		}
		]
}

Screenshots

vMapSearch... vMapDirections...

Supported Browsers

Chrome, Safari 6+, Firefox, IE 7+, Opera 12+

License / Download

vMap licensed under Creative Commons Attribution-NonCommercial 3.0 license. You are free to use vMap for your personal or non-profit website projects. You can get the author's permission to use vMap for commercial websites.

Bug tracker

Have a bug? Please create an issue on GitHub at https://github.com/vhugogarcia/vMap/issues

githalytics.com alpha

About

A lightning jQuery plugin that makes easy the use of Google Maps by sending a simple JSON Data Structure.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published