Google지도의 맞춤 정보 창은 무엇입니까?

Question

Google지도 용 맞춤 정보 창을 만들려고합니다.

나는 한 가지 예외를 제외하고 성공했습니다. 기본적으로 기본 정보 창은 계속 표시되며 제거하거나 숨길 방법을 모릅니다.

이

는 작업 FIDDLE

입니다 그리고 이것은 내가 아래있는 무슨이다 : custom info window

위의 링크에서 언급 한 바와 같이이 코드를 가지고 :

// Reference to the DIV which receives the contents of the infowindow using jQuery 
    var iwOuter = $('.gm-style-iw'); 

    /* The DIV we want to change is above the .gm-style-iw DIV. 
    * So, we use jQuery and create a iwBackground variable, 
    * and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev(). 
    */ 
    var iwBackground = iwOuter.prev(); 

    // Remove the background shadow DIV 
    iwBackground.children(':nth-child(2)').css({'display' : 'none'}); 

    // Remove the white background DIV 
    iwBackground.children(':nth-child(4)').css({'display' : 'none'}); 

그러나이 보이지 않는다 네가 내 피들에서 볼 수있는대로 할거야.

누군가이 문제에 대해 조언 해 주시겠습니까?

도움을 주시면 감사하겠습니다.

미리 감사드립니다.

편집 :

나는 어디 선가 얻고있다 생각합니다.

나는 사용자 정의 함수를 만들고 그 안에 배경을 제거하기위한 모든 코드를 넣었습니다. 그리고 나서 html = ''항목 바로 뒤에 customFunction();을 호출합니다.

그러나 문제는 그것이 첫 번째 클릭에 대해 작동하지 않습니다하지만이 두 번째 클릭에 대한 작동 또는 세 번째 등 클릭 있다는 것입니다 ...

나는 FIDDLE here

어떤 제안을 업데이트했습니다?

SECOND 편집 :

매우 가까운 얻기.

https://jsfiddle.net/8yL2vhoe/3/

하나 개 마커를 클릭 한 다음 내가 찾고 있어요 결과를 볼 것이다 번째 하나를 클릭합니다. (기본 팝업에 대한 배경 없음).

왜 첫 번째 클릭에 대해 작동하지 않는지 이해가 안됩니다!

Answer 1

업데이트 된 내용 Fiddle here을 참조하십시오.

var html = "..."; 및 var iw = new google.maps.InfoWindow({...})을 마커의 클릭 수신기 외부로 이동하기 만하면됩니다. 마커의 클릭 리스너는 다음과 같이 간단하게 할 수있다 : 또한

var activeInfoWindow; 
function infoWindow(marker, map, title, address, url) { 
    var html = "..."; 
    var iw = new google.maps.InfoWindow({  
     content: html,    
     //maxWidth: 350   
    },customFunction()); 
    google.maps.event.addListener(marker, 'click', function() { 
      if (activeInfoWindow != null) activeInfoWindow.close(); 
      iw.open(map, marker); 
      activeInfoWindow = iw;  
      customFunction(); 
    }); 
} 

, 당신의 createMarker() 기능이 정확히 무슨 일하지 않는,

function geocodeAddress(locations, i) { 
    var title = locations[i][0]; 
    var address = locations[i][1]; 
    var url = locations[i][2]; 
    geocoder.geocode({ 
     'address': locations[i][1] 
    }, 
    function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      createMarker(results, url, title, address); 
     } else { 
      alert("geocode of " + address + " failed:" + status); 
     } 
    }); 
} 
function createMarker(results, url, title, address) { 
    var marker = new google.maps.Marker({ 
     icon: url, 
     map: map, 
     position: results[0].geometry.location, 
     title: title, 
     animation: google.maps.Animation.DROP, 
     address: address, 
     url: url 
    }); 
    infoWindow(marker, map, title, address, url); 
    bounds.extend(marker.getPosition()); 
    map.fitBounds(bounds);  
}