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

HTML Code

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.

  • thankyou very much for you code.

    • heera542608

      You are welcome. I’m glad that it helped someone.

  • Mark

    This was really helpful, Thank-you!

  • shameer

    hi heera,
    can you give me a logic, how to point markers/locations on map, on click of serch button, where we have the location coordinates in database…

    thanks
    shameer ali shaik

    • Hi Shameer,
      Sorry, I didn’t understand your question, which search button you are talking about. Can you be more specific ?

      • shameer

        I am designing a web site to display my store locations…
        if the user enters any location in the search box, the corresponding stores in the location should be mapped on the map…

        i have got their data using datalist…
        i am stuck with this, marking the corresponding locations on map via the click of search button…

        any help will be appreciated…

        thanks
        shameer ali shaik

        • Hi Shameer,

          actually it’s not possible to tell anything without understanding/seeing your application’s code but from my guess I think you can take a look at this http://ubilabs.github.com/geocomplete/, hope it helps. Alternatively you can post a question on http://stackoverflow.com/ with some code example describing your problem or if you give me some more information (including code) then may be I can help.

          Thanks!

  • Theerthagiri

    It is working wonderfully. Thank you very much for your help.

  • Nur

    Hi there. Thanks for the tutorial, it really helps. I was thinking of saving this new coordinates so that the next time I load, the marker will point to the new location. Can you give suggestion on this? Can’t think of how to do that. Because all I can see the problem is how does it save the new location to overwrite the correct old location when there are many markers on the map.

    • First of all, you are welcome. To save the new coordinates you can use database, if you have multiple markers then you can loop through the markers to place them on the map but you’ll set only one marker/latlng as the map’s center initially and that is the center : latlng in the map options. You can use setCenter function too, check this documentation here https://developers.google.com/maps/documentation/javascript/events.

      • Nur

        Ah! I see what you’re suggesting at! Yes, that is a logical step to do that. I do save all the locations into the database so there is no problem to do the looping. Thank you so much for answering my question. Hope you will do more tutorials!

        • You are welcome and Yes I hope I’ll write more articles In Sha Allah!

  • signore

    thank you…. well explained 😉

  • Pankaj

    Thanks for sharing… I have used it in my plugin. 🙂

  • asmaa

    please help me!
    How to give longitude and latitude from my database to google map ?
    I want the map to show all the longitudes and latitudes in my database dynamically.

    • Sorry for the delayed reply! How can I help you without knowing what your code is and at which point you are stuck on. Right now i can give you a link of Google search result, http://goo.gl/bTkR4i. Try to find appropriate one. All the best 🙂

    • Chandu .m

      If you are from asp.net then use repeater to bind lat,lng values…and from that point to map…

  • tahta laksana dewanata

    sory sir, your download link was 404 not found, can you fix it. Because i need this tutorial, thanks.

Latest Blog