Using jquery with Google maps
Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script> <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.services.js"></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() { openDialog(this); }) }); }); 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" ) { $('#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(marker) { $('#dialog'+marker.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': { "Remove": function() { $(this).dialog( "close" ); marker.setMap(null); }, "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 webbfunktion.com example(translated)