Get latitude and longitude
Posted: Fri Jan 11, 2019 2:54 am
How can I get the latitude and longitude of a place clicked by a user on the map.
Thanks in advance
Thanks in advance
Remember Google has changed its policies last July. Now, to use maps, Google requires you to register with them and then obtain an API key from them. You should use your Google Maps Javascript API key in your code to view the Map.
Once you have the API key with you, the following code will work. I tested it here with my API key and is working fine.
The code will show the lat and lon of the place when you move your mouse, if you click on a point on the map, it will place a marker where you have clicked. It will also show the lat and lon of the last clicked place above the Map window
Code: Select all
#Include "FiveWin.ch"
//-----------------------------
Function Main()
ViewGoogleMap()
Return NIL
//-----------------------------------------------------------------------/
Function ViewGoogleMap()
Local cMapFile:="D:\GMaps.htm", cHtmlContent
TEXT INTO cHtmlContent
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 500px;
width: 900px;
}
</style>
</head>
<body>
<div id="latclicked"></div>
<div id="longclicked"></div>
<div id="latmoved"></div>
<div id="longmoved"></div>
<div style="padding:10px">
<div id="map"></div>
</div>
<script type="text/javascript">
var map;
function initMap() {
var latitude = 27.7172453; // YOUR LATITUDE VALUE
var longitude = 85.3239605; // YOUR LONGITUDE VALUE
var myLatLng = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14,
disableDoubleClickZoom: true, // disable the default map zoom on double click
});
// Update lat/long value of div when anywhere in the map is clicked
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Update lat/long value of div when you move the mouse over the map
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latmoved').innerHTML = event.latLng.lat();
document.getElementById('longmoved').innerHTML = event.latLng.lng();
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//title: 'Hello World'
// setting latitude & longitude as title of the marker
// title is shown when you hover over the marker
title: latitude + ', ' + longitude
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Create new marker on double click event on the map
google.maps.event.addListener(map,'dblclick',function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function() {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
});
// Create new marker on single click event on the map
google.maps.event.addListener(map,'click',function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY HERE and remove the square brackets]&callback=initMap"
async defer></script>
</body>
</html>
ENDTEXT
MEMOWRIT( cMapFile, cHtmlContent )
// Opens the Map using your default internet browser. A more generic solution
Shellexecute( NIL, "open", cMapFile )
Return NIL
