Google Maps API: неопределенное название маркера

Question

Я работаю над картой, где пользователь может нажать «Отменить», создавая новые маркеры.Для каждого маркера на боковой панели должна отображаться некоторая информация: широта, долгота и заголовок.Заголовок генерируется обратным геокодированием.Я создал массив маркеров и все вроде бы нормально, но заголовок первого маркера в массиве всегда "неопределен".Никаких проблем с координатами: только заголовок первого элемента!Заголовок регулярно отображается в информационном окне ... Но он "неопределен" в первом элементе массива.Вот мой код:

<script>
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('<ul></ul>');

    for( var i = 0; i < markers.length; i++ ){
        lat = markers[i].getPosition().lat();
        lng = markers[i].getPosition().lng();
        title = markers[i].getTitle();
        var html = '<li>Lat: ' + lat + '<br />Lng: ' + lng + '<br />' + title + '</li>';

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

    }//end for
    }//end if
}

$(document).ready( loadMap );
</script>

Где я ошибаюсь?

Answer 1

Я нашел решение!

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

В первом блоке кода я вызвал геокодер из функции openInfoWindow ().Во втором блоке кода я вызвал геокодер из функции addMarker ().О, я установил название маркера в объявлении создателя внутри функции addMarker ().Я не уверен в причине, но теперь это работает хорошо!