Skip to main content

Retriving co-ordinates...

         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!

 

         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!
Labels:

Comments

  1. Raj A. GireDecember 2, 2010 at 10:35 PM

    Mr. Shreerang Patwardhan thank you for sharing such a cool knowledge with us.

    ReplyDelete
  2. Shreerang PatwardhanDecember 2, 2010 at 10:40 PM

    Thanx Raj...

    ReplyDelete
  3. AnonymousDecember 3, 2010 at 7:21 AM

    Hi 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.

    please could you let me know if you think this is possible.
    Nevertheless, I commend your effort.

    ReplyDelete
  4. Shreerang PatwardhanDecember 3, 2010 at 6:12 PM

    Hello Casa...I can work for polygon data as well...I don't see the reason why it won't...

    ReplyDelete
  5. Danielle OwenMarch 8, 2025 at 2:46 AM

    Precise location data is crucial for many applications.

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

Fusion Table Layer...

    Today we will have a look at the "Fusion Table" Layer example. But before we start with the actual code, we will have a look at what Fusion Table is. Google Fusion Table is a free service for sharing and visualizing data online. It allows you to share data, merge data from multiple tables into interesting derived tables, and see the most up-to-date data from all sources. There is a lot of documentation about Google Fusion Table available on the web. You can visit their home page or the Google Research Blog to gather more information about Fusion Tables.     Let us have a look at the following code. The code is very short and simple to understand!     The few things to look out for in the above code are: The manner in which mapTypeId has been specified! In other Google Maps API v3 examples, we have seen that we specify mapTypeID as ROADMAP, SATELLITE, etc. i.e., all the letters are in uppercase and not in quotes! However, in this...
2 comments
Read more

ES6 101 - Set

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Rail Radar - Map your Train Live!

    Rail Radar - An interactive map that allows users to watch the movements of trains that are currently running in India. This means that you can now know the status of your trains live! Rail Radar is a real time tracker of the Indian Railways passenger trains. This live tracker is shown on our very own Google Maps and this long awaited system is a result of a collaboration between the CRIS - Center for Railway Information System and RailYatri.in.     Since this is a live tracking system of the Indian Railways, a few questions that will pop up in the minds who have ever travelled by railways will be - "Is this system really reliable? Is the data accurate? Can I trust the Rail Radar ?" Well, the system is reliable and you can trust the data since the information and intelligence behind the Rail Radar is extracted and harnessed from volumes of data from the official Indian Railway's train running operational data. With regards to accuracy – this...
Post a Comment
Read more

Reverse Geocoding

    The term geocoding generally refers to translating a human-readable address into a location on the map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding. You can read more about geocoding here .     The Geocoder in Google Maps API v3, supports reverse geocoding directly. While geocoding, we supply a textual address and that gets mapped as a location on the map. However, in reverse geocoding, instead of supplying the textual address, we will supply a comma- separated latitude- longitude pair and get a textual address as the result. You can have a look at the geocoding example here , before proceeding to the reverse geocoding example.     The reverse geocoder often returns more than one result. Geocoding "addresses" are not just postal addresses, but any way to geographically name a location. For example, when geocoding a point in the city of Agra, India,...
Post a Comment
Read more

A marker with an information window

         Following the sequence, I should be discussing a marker based example! Markers loading from an XML file. But, we will disrupt the sequence for the sole reason that I don't want to discuss comparatively tough examples as of now! So, we will jump on to a simple example to display an information window or the info window bubble as it is popularly known; along with a marker!          Let's have a look at the following code. This is a simple code which will place a marker at "India" with an information window attached to it which appears only when the marker is clicked! The code goes as below: <html> <head> <title> Google Maps JavaScript API v3 Example: Simple  Infowindow </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() {   ...
Post a Comment
Read more