Navigate Anywhere: Your Guide to Google Maps' Longitude and Latitude

How Get Longitude and Lattitude on click from Google Map

Get Longitude and Latitude - Google Map

In this article you will learn how to get longitude and latitude from google map on clicking on the map . Google already provides it's API for accessing Google Map , we just need to write a little js code to get the longitude and latitude from  google map .

In this article we will directly see the js code for getting the longitude and latitude from map by just clicking anywhere on the map . If you don't know how to setup the google map in your project you can read my article How to use google map in laravel  . Let's see how to get longitude and latitude from google map .

Step 1 - Setup your Route :

web.php :

	return view('map');

Step 2 - View File :

map.blade.php :



<div class="text-center">
	<h1>your other page content</h1><br>
<div id="map" style="height: 350px;width: 100%;">
<div class="row">
  <div class="col-4"></div>
<div class="text-center col-md-4">
<input type="text" name="long" class="form-control" id="longitude"><br>
<input type="text" name="lat" class="form-control" id="lattitude"><br>
<div class="col-4"></div>


      function initMap() {
        var myLatlng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(
            document.getElementById('map'), {zoom: 4, center: myLatlng});

        // Create the initial InfoWindow.
        var infoWindow = new google.maps.InfoWindow(
            {content: 'Click the map to get Lat/Lng!', position: myLatlng});;

        // Configure the click listener.
        map.addListener('click', function(mapsMouseEvent) {
          // Close the current InfoWindow.

          // Create a new InfoWindow.
          infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});

          // code for getting longitude and lattitude from map

          var longlat = mapsMouseEvent.latLng.toString(); // Getting the whole popup longitude and lattitude string from map
          var longlatarr = longlat.split(','); // splitting the string into array
          var longitude = longlatarr[0]; // Longitude 
          var lattitude = longlatarr[1]; //Lattitude
          longitude = longitude.replace('(',''); // removing unwanted character from longitude string
          lattitude = lattitude.replace(')',''); // removing unwanted character from lattitude string
          document.getElementById('longitude').value = longitude; // Showing the value in text box
          document.getElementById('lattitude').value = lattitude; // Showing the value in text

    <script defer


You can visit the official link to get the script :

Output :

Get Longitude and Latitude - Google Map
Now you will get your longitude and latitude just clicking on the map . Hope this article helped you

Previous Post Next Post

Contact Form