Get Coordinates from Google Maps Click Events

Implement interactive Google Maps coordinate retrieval using Maps JavaScript API with click event listeners. Initialize map with google.maps.Map specifying center coordinates and zoom level, add click event listener with google.maps.event.addListener monitoring click events on map, create marker placement function receiving map and location parameters, instantiate google.maps.Marker at clicked position, display coordinates in info window using google.maps.InfoWindow showing latitude with location.lat() and longitude with location.lng(), obtain Google Maps API key from developers console, include maps API script with key and callback parameter, and enable users to select locations visually getting precise coordinates for forms, address entry, or location-based applications.

Click on map and get Longitude -Latitude.

Google Map Jquery PHP

Click on map and get Longitude -Latitude. Tutorial/Guide

How To Get Longitude - Latitude When Clicked On Map?

 

<div id="MyMap" style="width:100%;height:500px;"></div>
<script>
function myMap() {
  var mapCanvas = document.getElementById("MyMap");
  var myCenter=new google.maps.LatLng(51.508742,-0.120850);
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  google.maps.event.addListener(map,'click', function(event) {
    LocationMarker(map, event.latLng);
  });
}
function LocationMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=myMap"></script>
//Get API key from Google.
//Read more at: https://developers.google.com/maps/documentation/javascript/get-api-key

 

๐Ÿ’ก Have a Coding Problem?

Search our archives or reach out to our team for solutions and expert advice.