Get Latitude and Longitude Value from Google Map

Get Latitude and Longitude Value from Google Map – Here i will show you how to get latitude and longitude value from google map PHP. Now a days everyone knows about google map and they are some awareness of google map to get their business or travel.

A number of software tools are available to get the latitude and longitude value from third party sources. Alternatively you can also build that type of software through your own code. For that you have strong knowledge in API service & Java program.

Then we are easily making those type of changes. Actually without latitude and longitude we can’t get the exact google map address. IT helps to track the location via this point. So both point and technologies are must for execute the Google map application.

get latitude and longitude value from google map

Below i have include the code for get the value of latitude and longitude value from google map in click event. When you have click the place in google map the JavaScript code alert. The complete code is very easy so try to be a good android developers as soon as possible. Everything is possible in the world,

<!DOCTYPE html>
<head>
    <title>Get Latitude & Longitude value from Google Map</title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(8.7139, 77.7567),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
            });
        }
    </script>
    <div id="dvMap" style="width: 100%; height: 600px">
    </div>
</body>
</html>

The output like below image,
get latitude and longitude value from google map

Get Location from Google Map using Latitude & Longitude

In previous, we have see how to get latitude and longitude value from google map. But now here see, how to get address location from google map using latitude and longitude. Here, i have used google official code used to get the address via latitude and longitude.

In previous, we have don’t need API key to get latitude and longitude value because but here we must need API key to get the address from google map in latitude and longitude. I hope above code helps to find the exact result when we are request new API service from server.

Get API Key

After that you have get the API from official website. That’s very so move on the link and then follow the on step procedure to complete your processing steps. Just click this link to get the Google Map API Key

After get the API key just copy the API key and paste from the below code,

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

The complete code like here,

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Get Address from Latitude & Longitude</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #latlng {
        width: 225px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input id="submit" type="button" value="Get Address">
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 40.731, lng: -73.997}
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        document.getElementById('submit').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        });
      }

      function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[1]) {
              map.setZoom(11);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map
              });
              infowindow.setContent(results[1].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGKxpbDZt-KFF6DRvJtqGC2saTW8x9cyc&callback=initMap">
    </script>
  </body>
</html>

The output like below image,

get address from google map using latitude and longitude

In below code i have used my API key. So in that place just replace your API key and run the project. If you get any error in this script, feel free to comment below.

Leave a Reply