We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second, we have displayed the co-ordinates in a form in the information window.
Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code.
<html>
<head>
<title>
Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map; //When using event as a parameter to a function declare map, strictly as a global variable
function initialize()
{
var myLatlng = new google.maps.LatLng(28.635157,77.22496);
map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event)
{
placeMarker(event.latLng);
});
}
function placeMarker(location)
{
var marker = new google.maps.Marker(
{
position: location,
map: map
});
var coords= location.lat().toFixed(6) + ', ' + location.lng().toFixed(6);
document.getElementById("points").value = coords;
}
</script>
</head>
<body onload="initialize()" onunload=GUnload()>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="text_coords" style="position: absolute; top:60px; left:600px; width:360px; height:600px; text-align:left">
<input type="text" id="points">
</div>
</body>
</html>
The output of the code will look as seen in the image below!
Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code.
<html>
<head>
<title>
Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map; //When using event as a parameter to a function declare map, strictly as a global variable
function initialize()
{
var myLatlng = new google.maps.LatLng(28.635157,77.22496);
map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event)
{
placeMarker(event.latLng);
});
}
function placeMarker(location)
{
var marker = new google.maps.Marker(
{
position: location,
map: map
});
var coords= location.lat().toFixed(6) + ', ' + location.lng().toFixed(6);
document.getElementById("points").value = coords;
}
</script>
</head>
<body onload="initialize()" onunload=GUnload()>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="text_coords" style="position: absolute; top:60px; left:600px; width:360px; height:600px; text-align:left">
<input type="text" id="points">
</div>
</body>
</html>
The output of the code will look as seen in the image below!
If you have any doubts or queries or suggestions about the codes and posts on the blog please leave a comment here or feel free to drop me a mail!
Mr. Shreerang Patwardhan thank you for sharing such a cool knowledge with us.
ReplyDeleteThanx Raj...
ReplyDeleteHi Mr. Shreerang, your idea looks good to me. Im trying to see the possibility of putting it into some practical use by integrating it into my project. So i was wondering if it will work for polygon data using Mapserver application instead of google map.
ReplyDeleteplease could you let me know if you think this is possible.
Nevertheless, I commend your effort.
Hello Casa...I can work for polygon data as well...I don't see the reason why it won't...
ReplyDeletePrecise location data is crucial for many applications.
ReplyDelete