Read Google Maps Coordinates by Clicking on Map

Hi Guys, we recently posted a tutorial on Using Google Maps API in PHP. This post received a lot of love from you guys as its one of the easiest tutorial to learn how to use Google Maps API  to display any location on Maps. In this post we will extend our previous post to get the coordinates (Longitude and Latitude) of a location by clicking on Map.  You will also get the zoom value if selected in map. It would be really helpful in application where you want user to find their location on Map and you save it in your database for future use. It’s just a demonstration of how to read Google maps coordinates by clicking on map, you can really do wonders with Google Maps API.

google map 2

                              Live Demo

                               [sociallocker] DOWNLOAD CODE[/sociallocker]

Below are the steps you need to do in Demo:

  1. Enter any address in the form given (e.g. Enter a city name)
  2. Hit submit and map would appear on right side of form.
  3. A red marker would appear in map, you can drag and move this marker to select/find the desired location.
  4. You will see the longitude and longitude value would appear in the form given at left bottom of page.
  5. You can also set zoom value for your map and it would be also reflected in the form at the bottom.

Now you can simply save these values in your database and generate the map fpr same location anytime.

I suggest you to please check previous post on Using Google Maps API in PHP for the code explanation. We have just added a little bit code of JS to read the coordinates and alert them in a popup and display back in the form. Below is the additional JS code we have added:

</p>
function addMarker(latlng,title,map) {
 var marker = new google.maps.Marker({
 position: latlng,
 map: map,
 title: title,
 icon:'map-red.png',
 draggable:true,
 animation: google.maps.Animation.DROP
 });

google.maps.event.addListener(marker,'drag',function(event) {
 document.getElementById('lat').value = event.latLng.lat();
 document.getElementById('lng').value= event.latLng.lng();
 });

google.maps.event.addListener(marker,'dragend',function(event) {
 document.getElementById('lat').value = event.latLng.lat();
 document.getElementById('lng').value = event.latLng.lng();
 alert(marker.getPosition());
 });
 google.maps.event.addListener(map, 'zoom_changed', function () {
 document.getElementById('zoom').value =map.getZoom();
 });

}
google.maps.event.addDomListener(window, 'load', initialize);
});
<p style="text-align: justify;" align="left">

Above code displays the marker and when its dragged in Map its position (Lat and Long) would be read. Then we have a little form to display back the lat and long values. Below is the code for that:

</p>
<div class="map_values">
<label>Latitude:</label>
<input type="text" id="lat" name="lat" value=""/>
<label>Longitude:</label>
<input type="text" id="lng" name="lng" value="" />
<label>Zoom:</label>
<input type="text" id="zoom" name="zoom" value="" />
</div>
<p style="text-align: justify;" align="left">

You should download the demo file to check the demo in your local setup. I hope this would be helpful to developers so please share this tutorial and support us 🙂 Please share your thoughts and comments on this post or if you would like to suggest any improvements or tutorial please let us know in comments.

6 thoughts on “Read Google Maps Coordinates by Clicking on Map”

  1. Hi,
    Thanks, for this tutorial, but I think your demo show the opposite, enter the coordinates and get the map, not as you said in the tile :
    Read Google Maps Coordinates by Clicking on Map

    1. Hi Majid,

      Once the map is displayed, you can click on red marker and drag it across the map. YOu will see the coordinated position in the form given at bottom left corner of the page.

      Thanks:
      Sanjeev

  2. Pingback: Read Google Maps Coordinates by Clicking on Map | SOFTWARELIST

Comments are closed.