Question

I have tried to create an application which creates a marker on the map on user’s click. Then if user clicks a marker an address should be displayed.

Trying to accomplish this I encountered a problem and so far haven’t found a solution. When I click on the map for the first time the first marker is created. Then when I try to click at that marker nothing appears. Then on second click a second marker appears and if I click on second marker an address which should be displayed at the first marker appears on the second and so on. So the marker addresses are somehow displaced and can’t figure out what’s the problem.

I have been looking for an issue but cannot determine what causes such strange behavior. I am a newbie in JavaScript so I don’t know whether it is somehow related with asynchronous request or there is some error in the code I overlooked.

The code is the following:

<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>

I would be very thankful if anyone could point out what is the cause of the issue or suggest any better solution.

Thank you!

Answer 1

The problem is that the geocoder is asynchronous and so the locationAddress gets its value after you have added the infowindow with and undefined content..

The addLocationInfo will have to be called from inside the callback function of the geocoder..
Following is the code with some minor changes in the order of called functions (and some parameters to them) to make this happen..

   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);
      });
    }
  }