지도 마커의 기본 Google Maps InfoWindow는 매우 둥글다. 정사각형 모서리가있는 사용자 지정 InfoWindow를 만들려면 어떻게합니까?
답변:
편집 약간의 사냥 후, 이것이 최선의 선택 인 것 같습니다.
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
온라인 스쿠버 다이빙 로깅을위한 웹 사이트 인 Dive Seven에서 사용한이 InfoBubble의 사용자 지정 버전을 볼 수 있습니다 . 다음과 같이 보입니다.
여기에 몇 가지 예가 더 있습니다 . 그러나 스크린 샷의 예만큼 멋지지는 않습니다.
jquery 만 사용하여 전체 InfoWindow를 수정할 수 있습니다.
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</p>'
});
여기서 <p> 요소는 실제 InfoWindow에 대한 후크 역할을합니다. domready가 실행되면 요소가 활성화되고 javascript / jquery를 사용하여 액세스 할 수 있습니다 $('#hook').parent().parent().parent().parent().
아래 코드는 InfoWindow 주위에 2 픽셀 테두리를 설정합니다.
google.maps.event.addListener(popup, 'domready', function() {
var l = $('#hook').parent().parent().parent().siblings();
for (var i = 0; i < l.length; i++) {
if($(l[i]).css('z-index') == 'auto') {
$(l[i]).css('border-radius', '16px 16px 16px 16px');
$(l[i]).css('border', '2px solid red');
}
}
});
새 CSS 클래스를 설정하거나 새 요소를 추가하는 것과 같은 모든 작업을 수행 할 수 있습니다.
필요한 것을 얻기 위해 요소를 가지고 놀아보세요 ...
고급 스타일링에 딱 맞는 InfoBox를 찾았습니다.
InfoBox는 google.maps.InfoWindow 처럼 작동 하지만 고급 스타일 지정을위한 몇 가지 추가 속성을 지원합니다. InfoBox를지도 레이블로 사용할 수도 있습니다. InfoBox는 또한 google.maps.InfoWindow 와 동일한 이벤트를 발생시킵니다 .
페이지에 http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js 포함
정보창의 스타일링은 바닐라 자바 스크립트를 사용하면 매우 간단합니다. 이 글을 작성할 때이 스레드의 정보 중 일부를 사용했습니다. 나는 또한 이전 버전의 가능한 문제를 고려했습니다 (비록 테스트하지는 않았지만).
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));여기에 < 완벽한 확대 / 축소로 Google지도에서 여러 주소를 찾는 방법 >이라는 기사가 있습니다. 작동하는 JS Fiddle 링크 및 전체 예제에 대해 참조 할 수 있습니다.
FWIX.com이 구체적으로 어떻게하는지 잘 모르겠지만, 그들이 Custom Overlays를 사용하고 있다고 내기하겠습니다 .
아래 코드를 사용하여 스타일 기본 창을 제거 할 수 있습니다. inforwindow에 HTML 코드를 사용할 수 있습니다.
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
});다음은 Google의 현재 정보창 예제를 기반으로 한 순수한 CSS 솔루션입니다.
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
#map *{
overflow: visible;
}
#content{
display: block;
position: absolute;
bottom: -8px;
left: -20px;
background-color: white;
z-index: 10001;
}이것은 작은 정보 창에서 잘 작동하는 빠른 솔루션입니다. 도움이된다면 투표하는 것을 잊지 마세요 : P
팝업 컨테이너 / 캔버스 또는 원하는 방법에 자신의 CSS 클래스를 추가 할 수도 있습니다. 현재 Google지도 3.7에는 코드에서 팝업 div 컨테이너를 앞에 추가하는 캔버스 요소로 스타일이 지정된 팝업이 있습니다. 따라서 googlemaps 3.7에서 다음과 같은 팝업의 domready 이벤트를 통해 렌더링 프로세스를 시작할 수 있습니다.
var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
if (this.content.parentNode.parentNode.previousElementSibling) {
this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
}
}
});element.previousElementSibling은 IE8에 존재하지 않으므로 작동하게 하려면 다음을 따르십시오 .
이벤트 등에 대한 최신 InfoWindow 참조 를 확인하십시오 .
어떤 경우에는 이것이 가장 깨끗하다는 것을 알았습니다.
내가 생각 해낸 가장 좋은 대답은 여기에 있다고 생각합니다 : https://codepen.io/sentrathis96/pen/yJPZGx
나는 이것에 대해 신용을 얻을 수 없습니다. 실제로로드하기 위해 Google지도 종속성을 수정하기 위해 다른 코드 펜 사용자로부터 이것을 포크했습니다.
다음에 대한 전화를 기록해 둡니다.
InfoWindow() // constructor