Google Map info window display previous geo result instead of current result
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.
精彩评论