I've successfully created a simple polyline on Google Maps and attached a click event listener to it.
However, I'm encountering an issue where clicking on the line provides me with latitude and longitude coordinates that point to Canada, even though the polyline is located in the US.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 30,
center: {lat: 38.582692796303924, lng: -89.9953046014092},
mapTypeId: 'satellite'
});
var flightPlanCoordinates = [
{lat: 38.582692796303924, lng: -89.9953046014092},
{lat: 38.582663144388235, lng: -89.99447848103262}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
icons: [{icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}, offset: '100%'}],
geodesic: true,
strokeColor: 'red',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
google.maps.event.addListener(flightPath, 'click', function(event) {
var arr = this.getPath();
console.log(arr.getAt(0).lat() + ', ' + arr.getAt(0).lng());
console.log(arr.getAt(1).lat() + ', ' + arr.getAt(1).lng());
console.log(event.latLng.lat() + ", " + event.latLng.lng());
});
flightPath.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=validkey&libraries=geometry&callback=initMap" async defer></script>
</script>
</body>
</html>
To reproduce this problem, please follow these steps:
1) Save the above code in an HTML file and replace "validkey" with a valid Google Maps API key.
2) Once the map loads, ensure it's at maximum zoom level and in satellite mode.
3) Open Developer Tools console using F12.
4) Click somewhere along the polyline.
5) Three lines will be printed.
The last line should display the coordinates of the clicked point, but it inaccurately shows a location in Canada.
Your feedback on this issue would be greatly appreciated. Thank you!