Google지도 + div 스크롤바 앵커

Question

Google지도 마커에서 마우스를 움직여 커서를 움직여보세요. 내가 여기까지 왔어요 : 당신은 스크롤이 꺼져 분명히 있음을 알 수

Example

. 나는 이것이 일어나고있는 이유를 생각하는 것 같다. 나는 이미 스크롤을 몸에 적용하려고 시도했지만 전체를 고정 시키지는 않았지만 문제를 해결하지는 못합니다. Wordpress plugin 고급 사용자 정의 필드를 사용하여 위치를 쉽게 추가 할 수 있으므로 ID를 추가하는 것은 마커를 사용하여 루프를 반복하는 것입니다 ($i++ 카운터가 아닌 경우).

이 내 스크립트는 다음과 같습니다

내 Google지도 API에 추가 한이 코드 :

google.maps.event.addListener(marker, 'mouseover', function() { 
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']"); 
marker.setIcon(icon2); 
this.setOptions({zIndex:10}); 
$(liTag).addClass('active'); 
$(".locations-item a").addClass('fade'); 
$('.gmap-scroll').animate({ 
     scrollTop: $(liTag).offset().top 
}); 
}); 


google.maps.event.addListener(marker, 'mouseout', function() { 
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']"); 
marker.setIcon(icon1); 
    this.setOptions({zIndex:1}); 
$(liTag).removeClass('active'); 
$(".locations-item a").removeClass('fade'); 
}); 

모든 항목 위도와 LNG 속성으로는 A를 가지고 있으며, 구글 JS이 가져 a .find (liTag 참조). div와 마커를 잘 보여주기 때문에 모든 고유 마커를 올바르게 찾습니다.

<div class="locations-item text-center"> 
<a data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 
[IMAGE OF LOCATION] 
</a> 
</div> 

큰 도움을 부탁드립니다!

Answer 1

귀하의 .gmaps 사업부가 position:fixed을 가지고 있으며, 브라우저가 생각하는 이유 .gmaps 사업부를 포함하는 .row DIV 0 높이를 가지고 즉,이다 따라서는 스크롤이 불필요하다고 생각한다.

는이 문제를 해결, 중 .gmaps DIV position:static 또는 position:relative을하고 다른 CSS 속성의 조정하거나 .gmaps 사업부를 포함 .row 일부 height를 할당합니다.

따라서 예를 들어 .gmaps에 대해 당신이 대신 하나를이 CSS를 사용 : 내가 도울 수 있었다

position: relative; 
height: 400px; 
width: 100%;