Проблема JavaScript с Google Maps

Question

Я попытался создать приложение, которое создает маркер на карте по клику пользователя. Затем, если пользователь щелкает маркер, должен отображаться адрес.

Пытаясь добиться этого, я столкнулся с проблемой и до сих пор не нашел решения. Когда я нажимаю на карту в первый раз, создается первый маркер. Затем, когда я пытаюсь нажать на этот маркер, ничего не появляется. Затем при втором щелчке появляется второй маркер, и если я щелкаю по второму маркеру, адрес, который должен отображаться у первого маркера, появляется у второго и так далее. Так что адреса маркеров как-то смещены и не могут понять, в чем проблема.

Я искал проблему, но не могу определить причину такого странного поведения. Я новичок в JavaScript, поэтому не знаю, связано ли это с асинхронным запросом или в коде, который я пропустил, есть какая-то ошибка.

Код следующий:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">

</script>
<script type="text/javascript">
    var map;
    var counter;
    var latlng;
    var locationAddress;
    var geocoder;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(46.043830, 14.488864);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    counter = 0;

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

  function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  latlng = location;
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  addLocationInfo(marker);
}

function addLocationInfo(marker){
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)});
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
}

function codeLatLng(latlng) {
    if (geocoder) {
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            locationAddress = results[1].formatted_address;
          }
        } else {
          locationAddress = "Neznan naslov";
        }
      });
    }
  }


</script>

Я был бы очень благодарен, если бы кто-нибудь мог указать причину проблемы или предложить какое-либо лучшее решение.

Спасибо!

Answer 1

Проблема в том, что геокодер является асинхронным, и поэтому locationAddress получает свое значение после добавления infowindow с неопределенным содержимым.

addLocationInfo должен вызываться изнутри функции обратного вызова геокодера.
Ниже приведен код с некоторыми незначительными изменениями в порядке вызываемых функций ( и некоторые параметры для них ), чтобы это произошло ..

   var map;
    var counter;
    var latlng;
    var locationAddress;
    var geocoder;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(46.043830, 14.488864);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    counter = 0;

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

  });
  }

  function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  latlng = location;
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });
  codeLatLng(location, marker);
}

function addLocationInfo(marker){
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)});
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
}

function codeLatLng(latlng, marker) {
    if (geocoder) {
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            locationAddress = results[1].formatted_address;
          }
        } else {
          locationAddress = "Neznan naslov";
        }
        addLocationInfo(marker);
      });
    }
  }