Google maps jQuery plugin geo search example

Using jquery with Google maps

Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/"></script>
$('#map_canvas').gmap().bind('init', function(event, map) { 
	$(map).click( function(event) {
		$('#map_canvas').gmap('addMarker', {
			'position': event.latLng, 
			'draggable': true, 
			'bounds': 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) {
			findLocation(event.latLng, this);
		}).click( function() {

function findLocation(location, marker) {
	$('#map_canvas').gmap('search', {'location': location}, function(results, status) {
		if ( status === 'OK' ) {
			$.each(results[0].address_components, function(i,v) {
				if ( v.types[0] == "administrative_area_level_1" || 
					 v.types[0] == "administrative_area_level_2" ) {
				} else if ( v.types[0] == "country") {

function openDialog(marker) {
	$('#dialog'+marker.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': { 
		"Remove": function() {
			$(this).dialog( "close" );
		"Save": function() {
			$(this).dialog( "close" );

There are many ways of writing this snippet, please refer to the sample code section in the wiki.

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 Webbstrategi för Alla example (translated)