[javascript] Google지도 : 사용자 지정 InfoWindow를 만드는 방법은 무엇입니까?

정보창의 스타일링은 바닐라 자바 ​​스크립트를 사용하면 매우 간단합니다. 이 글을 작성할 때이 스레드의 정보 중 일부를 사용했습니다. 나는 또한 이전 버전의 가능한 문제를 고려했습니다 (비록 테스트하지는 않았지만).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

코드는 콘텐츠를 보유하기 위해 ID가있는 div를 사용하여 평소와 같이 정보창을 생성합니다 (플러그인, 맞춤 오버레이 또는 거대한 코드 필요 없음). 이것은 간단한 외부 스타일 시트로 조작 할 올바른 요소를 가져 오는 데 사용할 수있는 시스템에 후크를 제공합니다.

정보 창 닫기 이미지가있는 div에 후크를 제공하는 것과 같은 작업을 처리하는 몇 가지 추가 부분 (엄격히 필요하지는 않음)이 있습니다.

마지막 루프는 포인터 화살표의 모든 부분을 숨 깁니다. 정보 창에 투명성을 원했고 화살표가 방해가 되었기 때문에 직접 필요했습니다. 물론 후크를 사용하여 화살표 이미지를 원하는 png로 바꾸는 코드를 변경하는 것도 매우 간단해야합니다.

jquery로 변경하려면 (왜 그런지 모르겠습니다) 상당히 간단해야합니다.

나는 일반적으로 자바 스크립트 개발자가 아니므로 모든 생각, 의견, 비판을 환영합니다 🙂

답변

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});