blog post

Retrieve latitude and longitude of a draggable pin via Google Maps.
Here's a working example of a user dropping a single pin, replacing a dropped pin with new pin.
Retrieve the coordinates of this point and put them into two fields: Latitude and Longitude. Here is an example of what I intend to do, but instead of several pins, it's just one and it's draggable.
The code that is actually working is the following:

 google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("latbox").innerHTML ="Lat:"+ this.getPosition().lat();
                document.getElementById("lngbox").innerHTML ="Long"+ this.getPosition().lng();
            });


Source code


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google map with dragable marker: TheOneblogs.com</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<!-- Google Map-->

    <script>

        var map;
        var lattitude = 28.635308;
        var longtitude = 77.22496000000001;

        function initialize() {
           
            var latlng = new google.maps.LatLng(lattitude, longtitude);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("mymap"), myOptions);

            var marker = new google.maps.Marker
                ({
                     position: new google.maps.LatLng(lattitude, longtitude),
                     map: map,
                     title: 'Title',
                     draggable: true // Make dragable Marker
                 });

            
            var companyaddress = '<div><b>TheOneblogs.com</b></div>' + '<div>Address here</div>';

            var infowindow = new google.maps.InfoWindow({
                content: companyaddress
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

            // Make Dragable Marker
            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("latbox").innerHTML ="Lat:"+ this.getPosition().lat();
                document.getElementById("lngbox").innerHTML ="Long"+ this.getPosition().lng();
            });

        }

        window.onload = initialize;

    </script>
    <!-- Google Map-->
</head>
<body style="text-align:center;">
    <h3>Google map with dragable marker</h3>

    <div id="mymap" style="width:100%;height:500px;"></div>

    <br />

    <div id="latbox"></div>
    <div id="lngbox"></div>
</body>
</html>

Google map with dragable marker
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Comments (4)

  • Herma

    Sunday, 23 October, 2016 07:49 AM

    whoah this blog is magnificent i love reading your articles. Keep up the great work! You know, many people are hunting around for this info, you could help them greatly.

  • anil mishra

    Thursday, 05 November, 2015 03:46 PM

    Nice

  • Tassels India

    Saturday, 12 September, 2015 08:06 PM
  • Atul kumar Shukla

    Sunday, 06 September, 2015 11:45 PM

    nice post

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information