Google Maps API: undefined marker title-Collection of common programming errors

I’m working on a map where the user can click unpon, generating new markers. For each marker, some info should be displayed in the sidebar: latitude, longitude and a title. The title is generated by reverse geocoding. I have created an array of markers and everything seems to be ok, but the title the first marker in the array is always “undefined”. No problems with coords: just the first element’s title! The title is regularly shown in the infowindow… But it is “undefined” in the first element of the array. Here is my code:

var map;
var markers = [];
var rome = new google.maps.LatLng(41.9012, 12.4751);
var infowindow;
var geocoder;

function loadMap(){
var myOptions = {
    zoom: 15,
    center: rome,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map( document.getElementById('canvas'), myOptions );
google.maps.event.addListener(map, 'click', function(evt){
    addMarker( evt.latLng );
});
}

function addMarker( location ){
var marker = new google.maps.Marker({
    position: location,
    map: map
});
marker.setMap( map );
openInfoWindow( marker );

markers.push( marker );
updateList( marker );
}

function openInfoWindow( marker ){
geocoder = new google.maps.Geocoder();
geocoder.geocode({'location': marker.getPosition()}, function(results, status){
    if (status == google.maps.GeocoderStatus.OK) {
        address = results[0].formatted_address;
    }else{
        address("Address not found");
    }
    var infowindow = new google.maps.InfoWindow({
        content: address
    });
    infowindow.open(map, marker);
    marker.setTitle(address);
    console.log(address);
}); 
}

function updateList( marker ){
    var lat, lng, title;
    if( markers.length > 0 ){
    $('#sidebar').html('

');

    for( var i = 0; i < markers.length; i++ ){
        lat = markers[i].getPosition().lat();
        lng = markers[i].getPosition().lng();
        title = markers[i].getTitle();
        var html = '

';

        $(html).prependTo('#sidebar ul');

    }//end for
    }//end if
}

$(document).ready( loadMap );

Where do I wrong?

1. I've found the solution!

   function addMarker( location ){
   geocoder = new google.maps.Geocoder();
   geocoder.geocode({'location': location}, function(results, status){
       if (status == google.maps.GeocoderStatus.OK) {
           address = results[0].formatted_address;
       }else{
           address("Address not found");
       }
       var marker = new google.maps.Marker({
           position: location,
           title: address,
           map: map
       });
       google.maps.event.addListener(marker, 'click', function(){
           openInfoWindow(marker);
       });
       marker.setMap( map );
       openInfoWindow(marker);
   
       markers.push(marker);
   
       updateList( markers );
   
   }); 
   }
   function openInfoWindow( marker ){
   var title = marker.getTitle();
   if(infowindow){
       infowindow.close();
   }
   infowindow = new google.maps.InfoWindow({
           content: title
       });
       infowindow.open(map, marker);
   }
   

   In the first block of code I called the geocoder from within openInfoWindow() function. In the second block of code, I called the geocoder from addMarker() function. Oh, I set up the title of the marker in the maker declaration, inside addMarker() function. I’m not sure about the reason, but now it works well!

Originally posted 2013-11-09 23:33:06.