Fork me on GitHub

jquery-geolocation-edit

Let's say you want to enter or edit geographic location(s). Do you feel that instead of editing Latitude and Longitude manually it would be nicer to have simple Google Maps window for such thing? Maybe even geocoding of typed address? If you answered yes, read on.

Download

jquery.geolocation.edit.js 5kb, uncompressed with comments
jquery.geolocation.edit.min.js 1.2kb, packed and gzipped

Examples

Required params are only coordinates fields, which can be pre-populated. Hint: drag marker on map.

CSS:

#map { width:320px; height:200px; }

JavaScript:

$("#map").geolocate({
	lat: "#lat",
	lng: "#lng"
});


Fields can be hidden (which is kind of a point of this plugin) and you can pass any additional options for Google Maps API, both for map (defined here) and marker (defined here).

$("#map2").geolocate({
	lat: "#lat2",
	lng: "#lng2",
	mapOptions: {
		disableDefaultUI: true,
		mapTypeId: "satellite",
		zoom: 13
	},
	markerOptions: {
		title: "This is your selected location"
	}
});

Geolocating from address

You can get position from address field (or multiple fields). Location will populate when you change text field. Hint: complete address below and press Enter or focus-out.

Note: Geocoding is an expensive operation, and there are Google Geocoding API usage limits for non-Premier users, so be sure not to do this automatically on every page load.

$("#map3").geolocate({
	lat: "#lat3",
	lng: "#lng3",
	address: ["#address3"]
});


Geolocating programmatically

Geocoding happens on jQuery "change" event (on any of address's input fields), but you can call it programmatically by passing just method name (after initialization).

$("#map3").geolocate("callGeocoding");


Options

Parameter Type Description
lat Latitude input field selector. Required.
lng Longitude input field selector. Required.
address array Optional array of selectors. Define it to use address string (concatenated value of all fields) for geocoding lookup. Useful for multiple address fields.
mapOptions object Options to pass for Google Maps Map object initialization.
markerOptions object Options to pass for Google Maps Marker object initialization.
geoCallback(data, status) function Function to execute on Google Geocoding query response. Proxies parameters from Geocoding response.