Displaying Latitude and Longitude on Marker click event

Question

I want to alert latitude and longitude value based on marker position. I am unable to do it.

I have recently started learning about google maps api. Please help me along.

In below code my marker is correctly moving between different location but not showing their latitude and longitude values.

<html>
 <head>
<base href="<%=basePath%>">
   <style type="text/css">
      #map_canvas {
      height: 430px;
      width: 980px;
      position: static;
      top: 100px;
      left: 200px;
   }
 </style>

 <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
 </script>

<script type="text/javascript">
var marker;

function initialize() {
    var latlng = new google.maps.LatLng(18.9647, 72.8258);

    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);


      google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    function placeMarker(location) {
        if (marker == undefined){
            marker = new google.maps.Marker({
                position: location,
                map: map,
                animation: google.maps.Animation.DROP
            });
        }
        else{
            marker.setPosition(location);
        }
        map.setCenter(location);

        google.maps.event.addListener(marker, "click", function (event) {
                alert(this.position);
        });
       }

       }             

     </script>
      </head>


    <body onload="initialize()">
       <div id="map_canvas" style="1500px; 1000px"></div>
         </body>
        </html>

Your code worked fine for me using Firefox. On first click I got the marker - when I clicked the marker I got the alert with location. That is exactly the behavior you expect from the code as written. If you wanted something else - please explain the behavior you are looking for. In its current form it is operational at http://www.floris.us/SO/mapPin.html - just copied and pasted. Firefox 21.0 — Floris, Jul 26 '13 at 19:52
Can you run Firebug and see what is going on? I did have to click ON THE MARKER to get the event. Also - if you move the marker (by clicking somewhere else) then click on it again, you get TWO alerts. Next time, you get THREE. Definitely something not quite right. Why not alert right after `map.setCenter(location)` without an event handler (since `placeMarker` is itself an event handler that should work). See http://www.floris.us/SO/mapPin2.html for demo (only alerts when you change location, not when you click marker). — Floris, Jul 26 '13 at 20:03
Thanks Floris i needed exactly your demo(http://www.floris.us/SO/mapPin2.html). Its working perfectly — shanky, Jul 26 '13 at 20:14
Can you explain what you mean - "display on latitude value"? I can't figure it out, sorry. — Floris, Jul 26 '13 at 20:27
Actually i want to display latitude and longitude values separately? — shanky, Jul 26 '13 at 20:30
`marker.position.lat()` returns latitude only; `marker.position.lng()` returns longitude. — Floris, Jul 26 '13 at 20:38

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

You don't want to create a separate event for displaying the event - make it part of the code that creates (or moves) the marker, as follows:

function placeMarker(location) {
    if (marker == undefined){
        marker = new google.maps.Marker({
            position: location,
            map: map,
            animation: google.maps.Animation.DROP
        });
    }
    else{
        marker.setPosition(location);
    }
    map.setCenter(location);
    alert(marker.position);
}

Rather than using an alert, you can get a much more beautiful effect by following the links given in this answer for a really cool tooltip effect. Definitely worth taking a look - the answer links both a tutorial and a demonstration.

edited May 23 '17 at 10:26

Community

1
1

answered Jul 26 '13 at 20:25

Floris

45,857
6
70
122

is there a way to only have one marker on the map? I get a marker everytime I click. – Johhan Santana May 25 '15 at 17:44
@Johhan - did you set the marker up as a global variable? If not, then it will create a new one every time. You need `var marker;` at the top level of the program...f – Floris May 25 '15 at 18:10
1

I was able to follow https://developers.google.com/maps/documentation/javascript/examples/marker-remove example, thank you for replying – Johhan Santana May 25 '15 at 20:36

Displaying Latitude and Longitude on Marker click event

1 Answers1