Google maps jQuery plugin Click & Drag Events with Geo Search

This example shows how to add markers to a map. Left click to add a marker. Left click on the marker to edit. Drag the marker if it's positioned wrong.

This example is inspired by webbfunktion.com example(translated)

Using jquery with Google maps

Download jQuery 1.4.X or higher and jQuery UI 1.8.X or higher or use Googles or Microsofts CDN.

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		
		$('#map_canvas').gmap( {'center': new google.maps.LatLng(55.3426606750, 18.0736160278), 'callback': function(map) {
			$(map).click( function(event) {
				$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
					$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
					findLocation(marker.getPosition(), marker);
				}).dragend( function(event) {
					var self = this;
					findLocation(event.latLng, this);
				}).click( function() {
					openDialog(this);
				})
			});
		}});
		
		function findLocation(location, marker) {
			$('#map_canvas').gmap('search', {'location': location}, function(results) {
				$.each(results[0].address_components, function(i,v) {
					if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
						$('#state'+marker.__gm_id).val(v.long_name);
					} else if ( v.types[0] == "country") {
						$('#country'+marker.__gm_id).val(v.long_name);
					}
				});
				marker.setTitle(results[0].formatted_address);
				$('#address'+marker.__gm_id).val(results[0].formatted_address);
				openDialog(marker);
			});
		}
		
		function openDialog(el) {
			$('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': { 
				"Remove": function() {
					$(this).dialog( "close" );
					el.setMap(null);
				},
				"Save": function() {
					$(this).dialog( "close" );
				}
			}});
		}
		
	});
</script>

More Google maps and jQuery examples