Google지도 API : 정의되지 않은 마커 제목

Question

사용자가 unpon을 클릭하여 새 마커를 생성 할 수있는지도에서 작업하고 있습니다. 각 마커에 대해 사이드 바에 위도, 경도 및 제목과 같은 몇 가지 정보가 표시되어야합니다. 제목은 역 지오 코딩에 의해 생성됩니다. 나는 마커의 배열을 만들었고 모든 것은 괜찮은 것처럼 보이지만 배열의 첫번째 마커는 항상 "정의되지 않음"입니다. coords에 문제가 없습니다. 첫 번째 요소의 제목 만! 제목은 정보창에 정기적으로 표시됩니다 ... 그러나 배열의 첫 번째 요소에는 "정의되지 않음"입니다. 내 코드는 다음과 같습니다.

<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() 함수 내부의 메이커 선언에서 마커의 제목을 설정했습니다. 이유에 대해서는 잘 모르겠지만 지금은 잘 작동합니다!