How to show address in HTML table using latitude and longitude

StackOverflow https://stackoverflow.com/questions/20361379

Question

How can I show the marker position in the address at the left column? (shown in the picture with a red circle at the left column)

Here is the link to my screenshot

I've already tried to replace ???????????? with

<div id="address"></div>

but it doesn't work.

Here's my code:

<script>
var infowindow = new google.maps.InfoWindow({});
var geocoder;
var marker;

function initialize()
{
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(51.429123,6.839681);
    var mapOptions =
    {
        zoom: 16,
        center: myLatlng,
        scaleControl: true
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    geocoder.geocode({'latLng': myLatlng}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            if (results[1])
            {
                marker = new google.maps.Marker(
                {
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    draggable:false,
                    title: results[1].formatted_address
                });    
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } 
            else{alert('No results found');}
        } 
        else {alert('Geocoder failed due to: ' + status);}
    }); 
}
google.maps.event.addDomListener(window, 'load', initialize);

function codeLatLng(myLatlng) 
{
  geocoder.geocode({'latLng': myLatlng}, function(results, status) 
  {
    if (status == google.maps.GeocoderStatus.OK) 
    {
      if (results[1]) 
      {
        marker.setPosition(myLatlng);
        $('#address').text(results[1].formatted_address);
      }else {alert('No results found');}
    }else {alert('Geocoder failed due to: ' + status);}
  });
}
</script>

And here's my HTML body:

<body>
<table width="100%" height="100%" border="1" cellpadding="1" cellspacing="1">
    <tr height="15%">
        <td colspan="3" align="center">For Header</td>
    </tr>
    <tr height="5%">
        <td width="20%">Hello admin. Log out? Click <a href="dologout.php">here</a></td>
        <td width="65%"><a href="home.php">Back to home</a></td>
        <td width="15%"><?php echo date ("D, d M Y");?></td>
    </tr>
    <tr>
        <td>
            Marker position in address:<br/>
            ????????? <-- I want to put address information here
        </td>
        <td colspan="2"><div id="map-canvas"></div></td>
    </tr>
    <tr height="5%">
        <td colspan="3" align="center">Have a nice day :)</td>
    </tr>
</table>

<?php mysqli_close($con);?>
</body>
Était-ce utile?

La solution

Change ???????????? by <div id="address"></div> like you tried, then add

document.getElementById('address').innerHTML = results[1].formatted_address;

After the

infowindow.setContent(results[1].formatted_address);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top