23

Dynamic Google Map By Drag And Drop

Today I’m going to share my recent work experience. A couple of days ago I was working on an online hotel room booking system web application. One of the feature of that application was to allow the admin the ability to add hotels on his site and let him set up the location of the hotel using Google map. Well it was not so hard because during the hotel setup we get the hotel’s address from client and easily we could have show the hotel’s location on the map using that human readable address and I think almost everyone knows how to do that and everyone  uses that approach. Well,  I was thinking it too but unconsciously I’ve gave a wrong hotel address during a hotel’s setup process in admin panel and the result was obviously unexpected and I’ve wasted my precious time to find out the problem . After that I’ve changed my plan because my client can make the same mistake and he may not be able to find out that it was his mistake. So I’ve planed to save the latitude, longitude value in my database during the hotel setup and I’ll use that value directly to get the map and that will also save some time to because I won’t need to convert the string address to the map’s compatible (latitude, longitude) address at the front end. So, I’ve gave the user the ability to drag the marker and drop it at any location on the map and saved that location’s latitude, longitude value in the database.

Hence, this is the topic of my article, I’m going to show you how to setup the map location using marker’s drag and drop event used as “dragend” in the code, this is not a native “DOM” (Document Object Model) event, it’s Google map’s custom event, when drag and drop occurs,  map object  fires this custom event. Well, lets see the code now.

Javascript code

// google_dynamic_map.js file
// Map Initialize function
function initialize()
{
	// Set static latitude, longitude value
	var latlng = new google.maps.LatLng(37.7699298, -122.4469157);
	// Set map options
	var myOptions = {
		zoom: 16,
		center: latlng,
		panControl: true,
		zoomControl: true,
		scaleControl: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	// Create map object with options
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// Create and set the marker
	marker = new google.maps.Marker({
		map: map,
		draggable:true,
		position: latlng
	});

	// Register Custom "dragend" Event
	google.maps.event.addListener(marker, 'dragend', function() {

		// Get the Current position, where the pointer was dropped
		var point = marker.getPosition();
		// Center the map at given point
		map.panTo(point);
		// Update the textbox
		document.getElementById('txt_latlng').value=point.lat()+", "+point.lng();
	});
}

HTML Code

	
		
		
	
	
		Latitude, Longitude 
		

	

Process explained

I’ve made some assumption that you understand html and javascript. So, at first I’ve created one function and named it initialize . Then I’ve called the initialize  function at body onload event and in that function I’ve initialize the map and also registered the map object’s  “dragend” custom event by google.map.event.addListener method. This method took three arguments. First one is the marker object that I’ve created at line 21 of the initialize function, the  second argument is the custom event and the third one is the listener function for the “dragend” event, which means that, the function given as third argument will be executed when the marker object (given as first argument) will  fire  “dragend” (second argument) event. Here the third argument, that is an anonymous function. Inside this function I’ve got the current position (where the marker was dropped) by calling the marker object’s getPosition() method and then called the map object’s panTo() method with  an argument, that was “point”, which has the current latitude, longitude value. Finally, I’ve updated the textbox, just stored the current latlng value, where the map is currently centered. That’s it.

Well, in my web application I’ve gave other ways to it and also gave another text box to give the human readable address from which I generate the latitude, longitude value. My intention was to discuss about the custom event only so I’ve omitted those and focused at the main topic only. Hope I explained it properly and it will help others.