开发者

Google Map info window display previous geo result instead of current result

开发者 https://www.devze.com 2022-12-23 10:16 出处:网络
can someone help me out with this pretty please? i dont know what went wrong with my codes, i want to display the location address in the info window but everytime it displays the previous result inst

can someone help me out with this pretty please? i dont know what went wrong with my codes, i want to display the location address in the info window but everytime it displays the previous result instead of the current one. for example when i first click a location it adds a marker but the address displayed is undefined (which is the previous result). then i click another spot it displayed the address of the first one.

how can i resolve this to show address for the current location being mark? please. thanks alot. below is my code..

var map;
var marker;
var markersArray = [];

var infoWindow;
var buffer;

var geocoder, regeocoder;

function initialize() {

window.onunload = google.maps.Unload; 

// Creating an option object for the 开发者_如何学Gomap

    var myOptions = {
            zoom: 16,
            center:COUNTRY,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };

// Initializing the map 

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

// Add onClick event to the map 

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

function placeMarker(location, flag) {

// Get clicked location <Latitude, Longtitude>

var clickedLocation = location;

    if (markersArray) {
        for (i in markersArray) {
                markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }

    // Create a new marker 

    marker = new google.maps.Marker({
        position: clickedLocation, 
            map: map, 
            icon: 'image/blue-dot.png',
            title: "Select this location",
            clickable: true
    });

    if (flag == true) { 

        // Start reverse Geocode

        regeocoder = new google.maps.Geocoder();

        if (regeocoder) {
                regeocoder.geocode({'latLng': clickedLocation, 'region': region}, function(results, status){

                if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) { buffer = results[0].formatted_address; }
                } 
            else {  }
                });
        }

    setHiddenValue(buffer);

    setMarkerInfo(buffer, clickedLocation);

    }   

    // Attach mouseover event to a marker that will trigger the markerInfo  

    google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,marker); }); 

    // Attach mouseout event to the marker that will delete the markerInfo  

    google.maps.event.addListener(marker, 'mouseout', function() { if (infowindow) infowindow.close(); });  

    markersArray.push(marker);

    map.setCenter(clickedLocation);
}


function setMarkerInfo(title, textbody) {

    // Initialize the contentString

    var contentString = '<div id="content">'+'<div id="siteNotice">'+'</div>'+
    '<br/><h3 id="firstHeading" class="firstHeading">' + title + '</h1>'+
    '<div id="bodyContent">'+
    '<p>Map Coordinates: <br/>' + textbody + '</p>'+
    '</div>'+
    '</div>';

    infowindow = new google.maps.InfoWindow({ content: contentString });
    infosArray.push(infowindow);
}

function setHiddenValue(data) {
    var hiddenVal = document.getElementById('getLoc');
    if (hiddenVal) { hiddenVal.value = data; }
}

function searchMap(info) {

var address = info;
var loc;
var addr;

    geocoder = new google.maps.Geocoder();

    if (geocoder) {
            geocoder.geocode({'address': address, 'region': region}, function(sresults, sstatus){
                if (sstatus == google.maps.GeocoderStatus.OK) {

                    if (sresults[0]) { 

                    loc = sresults[0].geometry.location;

                    geocoder.geocode({'latLng': loc}, function(results, status){
                            if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) { addr = results[0].formatted_address; }
                            } 
                        else { alert("No Matching Results"); }
                        }); 

                }

            }else { alert("No Matching Results"); }

            });
    }

    if (geocoder) {
            geocoder.geocode({'address': address, 'region': region}, function(sresults, sstatus){
                if (sstatus == google.maps.GeocoderStatus.OK) {

                    if (sresults[0]) { 

                    loc = sresults[0].geometry.location;

                    geocoder.geocode({'latLng': loc}, function(results, status){
                            if (status == google.maps.GeocoderStatus.OK) {
                            if (results[0]) { addr = results[0].formatted_address; }
                            } 
                        else { alert("No Matching Results"); }
                        }); 

                }

            }else { alert("No Matching Results"); }

            });
    }

    setHiddenValue(addr);

    setMarkerInfo(addr, loc);

    placeMarker(loc, false);

}


Your problem is linked to the fact that the address info arrives asynchronously, accordingly you execute all the code before you obtain the relative formatted address from:

geocoder.geocode({'latLng': loc}, function(results, status){
                            if (status == google.maps.GeocoderStatus.OK) {
                              if (results[0]) { addr = results[0].formatted_address; }
                            } 
                            else { alert("No Matching Results"); }
                 });

I suggest to link everything into a combined function call:

google.maps.event.addListener(marker, 'mouseover', function() { 

and instead of:

infowindow.open(map,marker); });

you call:

new google.maps.InfoWindow({ content:

and instead of:

contentString });

you call:

geocoder.geocode({'latLng': loc}, function(results, status){
    if (status == google.maps.GeocoderStatus.OK) {
         if (results[0]) { addr = results[0].formatted_address; }
    } else {
         * alert("No Matching Results"); */
    }
});

and herein get the formatted result into the css form you desire and return it as a string.

This way, whenever you pass over your marker you query the relative address and create the infowindow on the fly.

Hope it helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号