Ep

Ep

Find Latitude and Longitude of Draggable Marker Google Maps API

Retrieve latitude and longitude of a draggable pin via Google Maps API v3



In this post I will explain about how to get latitude and longitude of a draggable marker, retrieve latitude and longitude of a draggable marker, get coordinates of a draggable marker using Google Maps API v3. Find the source code below:

Retrieve latitude and longitude of a draggable, google.maps.Marker, google map with a draggable marker, getting lat long, markers on google maps, get coordinates,

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title>Find Latitude and Longitude of Draggable Marker Google Maps API</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="js/mapUtility.js" type="text/javascript"></script>
</head>
<body onload="initialize();">
    <h4>
        Find Latitude and Longitude of Draggable Marker Google Maps API</h4>
    <label for="latitude">
        Latitude:</label>
    <input id="txtLat" type="text" value="28.47399" />
    <label for="longitude">
        Longitude:</label>
    <input id="txtLng" type="text" value="77.026489" /><br />
    <br />
    <br />
    <div id="map_canvas" style="width: auto; height: 500px;">
    </div>
</body>
</html>
--------------- 
mapUtility.js
function initialize() {
    // Creating map object
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 12,
        center: new google.maps.LatLng(28.47399, 77.026489),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // creates a draggable marker to the given coords
    var vMarker = new google.maps.Marker({
        position: new google.maps.LatLng(28.47399, 77.026489),
        draggable: true
    });

    // adds a listener to the marker
    // gets the coords when drag event ends
    // then updates the input with the new coords
    google.maps.event.addListener(vMarker, 'dragend', function (evt) {
        $("#txtLat").val(evt.latLng.lat().toFixed(6));
        $("#txtLng").val(evt.latLng.lng().toFixed(6));

        map.panTo(evt.latLng);
    });

    // centers the map on markers coords
    map.setCenter(vMarker.position);

    // adds the marker on the map
    vMarker.setMap(map);
}

Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :) 
Find Latitude and Longitude of Draggable Marker Google Maps API Reviewed by Ravi Kumar on 2:10:00 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.