How To Get Location From Google Map API Using JavaScript?

In this Tutorial we will learn How to get Location from Google Map using JavaScript API. Showing user side Google Map using JavaScript could be a simple task. In this example, I used Google Map JavaScript API to display map and get current location of the user.

See also

How to get location from latitude and longitude in JavaScript?

Create an API key from Google Cloud Platform that you will need to access Google Maps API.
Replace your API key inside Google Maps JavaScript script tag at the bottom of the HTML code below.
Define div element with an ID of map.
Get the user’s location in the form of Latitude and Longitude using getCurrentPoistion() method, which is a part of the HTML5 Geolocation JavaScript API.
Inside the success callback function, invoke getGoogleMap() with Latitude and Longitude values as arguments.
Display user latitude and longitude an ID of result.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to get google map from latitude and longitude in javascript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<h1 class="text-center">How to get google map from latitude and longitude</h1>
<div class="container bg-light">
    <div class="col-md-12 text-center pt-3 pb-3">
      <button type="button" class="btn btn-warning" id="locationBtn">Detect my location</button>
      <div id="result"></div>
    </div>
</div>


<div id="googleMap" style="width:100%; height:750px;"></div>

<script>
  let result = document.getElementById("result");

  function getGoogleMap(position){
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    result.innerHTML = "<b>Latitude:</b> " + latitude + "<br><b>Longitude: </b> " + longitude;

    var mapProp = {
      center:new google.maps.LatLng(latitude, longitude),
      zoom:5,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }
    
  function failLocation(){
    console.log("Unable to retrieve your location");
  }
  
  const button = document.getElementById('locationBtn');
  
  button.addEventListener("click", async() => {
    if ("geolocation" in navigator){
      navigator.geolocation.getCurrentPosition(getGoogleMap, failLocation);
    }
  });

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=getGoogleMap"></script>
</body>
</html>

How to Get Location from Google Map API using JavaScript?

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊