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

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

---

지도 마커의 기본 Google Maps InfoWindow는 매우 둥글다. 정사각형 모서리가있는 사용자 지정 InfoWindow를 만들려면 어떻게합니까?

---

편집 약간의 사냥 후, 이것이 최선의 선택 인 것 같습니다.

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

온라인 스쿠버 다이빙 로깅을위한 웹 사이트 인 Dive Seven에서 사용한이 InfoBubble의 사용자 지정 버전을 볼 수 있습니다 . 다음과 같이 보입니다.

---

Google 은 맞춤 정보 창을 구현하는 방법을 보여주는 데모 를 제공합니다 . 상당한 양의 코드가 필요하지만 매우 간단 해 보입니다.

---

여기에 몇 가지 예가 더 있습니다 . 그러나 스크린 샷의 예만큼 멋지지는 않습니다.

---

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에 후크를 제공하는 것과 같은 작업을 처리하는 몇 가지 추가 부분 (엄격히 필요하지 않음)이 있습니다.

The final loop hides all the pieces of the pointer arrow. I needed this myself as I wanted to have transparency on the infowindow and the arrow got in the way. Of course, with the hook, changing the code to replace the arrow image with a png of your choice should be fairly simple too.

If you want to change it to jquery (no idea why you would) then that should be fairly simple.

I'm not usually a javascript developer so any thoughts, comments, criticisms welcome :)

---

Below piece of code may help you out.

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

Here is an article < How to locate multiple addresses on google maps with perfect zoom > that helped me achieved this. You can refer it for working JS Fiddle link and complete example.

---

I'm not sure how FWIX.com is doing it specifically, but I'd wager they are using Custom Overlays.

---

You can use code below to remove style default inforwindow. After you can use HTML code for inforwindow:

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

---

Here is a pure CSS solution based on the current infowindow example on google:

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

This is a quick solution that will work well for small info windows. Don't forget to up vote if it helps :P

---

You can even append your own css class on the popup container/canvas or how do you want. Current google maps 3.7 has popups styled by canvas element which prepends popup div container in code. So at googlemaps 3.7 You can get into rendering process by popup's domready event like this:

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 is not present at IE8- so if you want to make it work at it, follow this.

check the latest InfoWindow reference for events and more..

I found this most clean in some cases.

---

I think the best answer I've come up with is here: https://codepen.io/sentrathis96/pen/yJPZGx

I can't take credit for this, I forked this from another codepen user to fix the google maps dependency to actually load

Make note of the call to:

InfoWindow() // constructor

참고URL : https://stackoverflow.com/questions/3860277/google-maps-how-to-create-a-custom-infowindow