Show lat and lng of google map in html tag

i have below code

 <!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  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 infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);


</script>
<script>
 function myFunction() {
    document.getElementById("lat").innerHTML = ;
}
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="lat" onclick="myFunction()">here</div>

</body>
</html>

i changed this from w3schools

i wana to show last lat and lng in

and store them in variable,how to do it?

if you cant see my code…i placed on replays

Could you please repost your code? There’s no code showing.

1 Like
  <!DOCTYPE html>
    <html>
    <head>
    <script
    src="http://maps.googleapis.com/maps/api/js">
    </script>

    <script>
    var map;
    var myCenter=new google.maps.LatLng(51.508742,-0.120850);

    function initialize()
    {
    var mapProp = {
      center:myCenter,
      zoom:5,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

      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 infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
      });
      infowindow.open(map,marker);
    }

    google.maps.event.addDomListener(window, 'load', initialize);


    </script>
    <script>
     function myFunction() {
        document.getElementById("lat").innerHTML = ;
    }
    </script>
    </head>

    <body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
    <div id="lat" onclick="myFunction()">here</div>

    </body>
    </html>`     <!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  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 infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);


</script>
<script>
 function myFunction() {
    document.getElementById("lat").innerHTML = ;
}
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="lat" onclick="myFunction()">here</div>

</body>
</html>

@labour: You need to format your code for it to show corectly.

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

1 Like

THanks…This Is Big Problem For me

My problem is Done,

if i n future any one needed this solution you can use location.lat() + '
Longitude: ’ + location.lng()

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.