More Examples

Click and drag marker to get Latitude/Longitude


<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Click and drag marker to get Latitude/Longitude</title>
	#map-canvas {        
		height: 400px;
		width: 600px;        
	pre {
		border:1px solid #D6E0F5;
	table {
	   border-collapse: collapse;
	td{ border: 1px solid #B0B0B0;
		padding: 5px;
		background-color: #F8F8F8 ;               

	<script src="" type="text/javascript"></script>	    
	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">

	// this a jQuery event that is fired when document is ready. It allows us to start using useful jQuery selectors
	$( document ).ready(function() {	
		// create a Google Maps map variable
		var map;

		// create a location variables
		var myLocation = new google.maps.LatLng(45.53 , -73.62);
		// create a pop-up window variable
		var myInfoWindow = new google.maps.InfoWindow();
		// A function to create the marker and InfoWindow
		function createMarkerAndInfoWindow(location, name, html) {
			// create marker for location provided
			var marker = new google.maps.Marker({
			position : location,
			map: map,
			title: 'This is the default tooltip!',
			draggable: true

			// Add listener on market which will show infoWindow when clicked
			google.maps.event.addListener(marker, "click", function() {
			  myInfoWindow.setContent(html);, marker);
			// Add listener on 'drag end' event, add logitude and latitude to beginning of table
			google.maps.event.addListener(marker, 'dragend', function(evt){
				var textToInsert = '';	
				textToInsert = '<tr><td>' + + '</td><td>' + evt.latLng.lng().toFixed(5) + '</td></tr>';			
				$("#myTable tbody").prepend(textToInsert);

			// listener on drag event
			google.maps.event.addListener(marker, 'dragstart', function(evt){
				// nothing for now
			return marker;
		function initialize() {
			var mapOptions = {
				zoom : 10,
				center : myLocation,
				draggable: true,
				mapTypeId : google.maps.MapTypeId.ROADMAP
			// create the map
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

			// add marker
			var marker = createMarkerAndInfoWindow(myLocation, "myMarkerName", 
				"You can add all sorts of <br/> <b>formattted</b> content to the <br/>InfoWindow!");
		// add a listener to the window object, which as soon as the load event is 
		// triggered (i.e. "the page has finished loading") executes the function "initialize"
		google.maps.event.addDomListener(window, 'load', initialize);
	});  // end document ready

	<h3>Click and drag marker to get Latitude/Longitude</h3>	
	<a href="../index.php">BACK</a>
	<div id="map-canvas"></div>	
	<table id='myTable'>