获取谷歌地图中单击标记的完整地址

Question

Can you please help me out with google maps .

I need to get the full address of the clicked marker and display the address details in ASP label controls . In fact I am showing only one marker at a time.

Eg Stand No or House Number : 15 Street Name: St Joseph Street Suburb: Silverton City: Johannesburg Latitude: 24.8545 Longitude: -28.23565

I am using the following JavaScript code for the map and its working fine.

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

    function initialize() {

        var latitude = document.getElementById('<%= hdnLat.ClientID%>').value;
        var longitude = document.getElementById('<%= hdnLng.ClientID%>').value;

        var myLatlng = new google.maps.LatLng(longitude, latitude);
        var mapOptions = {
            zoom: 18,
            center: myLatlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable:true,
            animation: google.maps.Animation.DROP
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
    }

    function toggleBounce() {

        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

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

</script>

I am using the following ASP controls to work with the map.

<asp:HiddenField ID="hdnLng" runat="server" />
<asp:HiddenField ID="hdnLat" runat="server" />

<div id="map-canvas" style="height:425px;"></div>

<asp:Label ID="addressStandNo" runat="server"></asp:Label>
<asp:Label ID="addressStreetName" runat="server"></asp:Label>
<asp:Label ID="addressSuburb" runat="server"></asp:Label>
<asp:Label ID="addressCity" runat="server"></asp:Label>
<asp:Label ID="addressLatitude" runat="server"></asp:Label>
<asp:Label ID="addressLongitude" runat="server"></asp:Label>
<asp:Label ID="addressPostalCode" runat="server"></asp:Label>

I just need to get the details (the address) of the clicked marker on the map and assign those values to the ASP controls listed above.

Thank you in advance.

Answer 1

You have to do the following on click event of marker

1. reverse geocoding using latlng get the location information
2. show the returned geocodig response information in asp labels. refer geocoding response

 //Add listener google.maps.event.addListener(marker, "click", function(event) { toggleBounce() showInfo(this.position); }); function showInfo(latlng) { geocoder.geocode({ 'latLng': latlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { // here assign the data to asp lables document.getElementById('<%=addressStandNo.ClientID %>').value = results[1].formatted_address; } else { alert('No results found'); } } else { alert('Geocoder failed due to: ' + status); } }); }