Easy Code Stuff: Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3

Following example will help you to create a Google Map which has picker to find the latitude and longitude.

<html>
  <head> 
    <title>Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3</title> 
    <script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
  </head> 
  <body>
    <div id="map-canvas" style="width:100%;height:500px;"></div>
    Latitude  : <input type="text" id="lat"/>
    Longitude  : <input type="text" id="lng"/>
   
    <script type="text/javascript">
        var lat = 6.929537; //Your Location Latitude
        var lon = 79.866271; //Your Location Longitude
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
            center: latlng,
            zoom: 15
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, "dragend", function (event) {
            document.getElementById("lat").value = event.latLng.lat();
            document.getElementById("lng").value = event.latLng.lng();
        });
  
    </script>
  </body>
</html>

This Is Simple Example That Shows The Given Location Using A Marker.You Can Drag The Marker Position As You Want.Then It Will Get You The Updated Marker Position.This Uses A 'Dragend' Function.There Are Lot Of Functions Associated With Google Maps.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Easy Code Stuff

Jul 24, 2015

Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3

No comments:

JWT Token Decode Using Jquery