I am currently working on a project using javascript to display the current location of a user on a map. I am trying to add a listener for when the user clicks on the map to show the latitude and longitude coordinates. However, my code is not working as expected. I suspect that I may have made a mistake somewhere. Can someone please help me identify what is wrong with my code:
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
});
} else {
alert("Geolocation API is not supported in your browser.");
}
function setUpClickListener(map) {
// Attach an event listener to map display
// obtain the coordinates and display in an alert box.
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX,
evt.currentPointer.viewportY);
alert('Clicked at ' + Math.abs(coord.lat.toFixed(4)) +
((coord.lat > 0) ? 'N' : 'S') +
' ' + Math.abs(coord.lng.toFixed(4)) +
((coord.lng > 0) ? 'E' : 'W'));
});
}
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
setUpClickListener(map);
</script>
<style type="text/css">
#mapContainer
{
height: 500px;
width: 800px;
border: 10px solid #eaeaea;
}
</style>
<div id="mapContainer">
</div>