Google地圖：如何創建自定義InfoWindow？

Question

地圖標記的默認Google地圖InfoWindow非常圓。我如何創建一個帶方形角的自定義InfoWindow？

Answer 1

我不確定FWIX.com是如何專門做的，但我敢打賭他們正在使用Custom Overlays。

Answer 2

編輯一些狩獵周圍後，這似乎是最好的選擇：

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

你可以看到這個InfoBubble我對Dive Seven, a website for online scuba dive logging使用的定製版本。它看起來像這樣：

---

谷歌provide a demo，說明如何實現自定義信息窗口。它需要相當數量的代碼，但似乎非常簡單。

---

還有一些例子here。不過，它們絕對不像屏幕截圖中的示例那麼好看。

Answer 3

我發現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在你的頁面

Answer 4

你甚至可以附加在彈出的容器/畫布上自己的CSS類或你想怎樣。 當前谷歌地圖3.7彈出窗口樣式的元素，它代表彈出div容器的代碼。 因此，在谷歌地圖3.7，您可以進入通過彈出的domready中事件這樣的渲染過程：所以如果你想讓它在它的工作，follow 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根本不存在IE8-。

check the latest InfoWindow reference事件以及更多......

我發現在某些情況下，最乾淨的。

Answer 5

可以修改使用jQuery獨自整個信息窗口...

var popup = new google.maps.InfoWindow({ 
    content:'<p id="hook">Hello World!</p>' 
}); 

這裏<p>元素將作爲一個鉤到實際的信息窗口。一旦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類或者只是添加一個新的元素。

與元素玩得到你所需要的...

Answer 6

樣式化的信息窗口與香草的javascript非常簡單。在寫這篇文章時，我使用了這個線程中的一些信息。我也考慮過早期版本的ie可能存在的問題（儘管我沒有對它們進行測試）。

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

的代碼創建信息窗口照常（無需插件，自定義疊加或巨大的代碼），使用一個div一個id持有的內容。這爲系統提供了一個鉤子，我們可以使用這個鉤子來獲取正確的元素來使用簡單的外部樣式表進行操作。

有一些額外的部分（並不是嚴格需要的），它們處理的事情就像給它一個關閉信息窗口圖像的div鉤。

最後一個循環隱藏指針箭頭的所有部分。我自己需要這個，因爲我想讓infowindow具有透明度，並且箭頭擋在了路上。當然，使用鉤子，更改代碼以用你選擇的PNG替換箭頭圖像應該也相當簡單。

如果你想改變它爲jquery（不知道爲什麼你會），那應該是相當簡單的。

我通常不是一個JavaScript開發，因此任何想法，意見，批評歡迎:)

Answer 7

下面的代碼可以幫助你。

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

這裏是一個文章< How to locate multiple addresses on google maps with perfect zoom>，幫助我實現了這一點。你可以參考它的工作JS小提琴鏈接和完整的例子。

Answer 8

您可以使用下面的代碼刪除樣式默認的inforwindow。後，您可以使用HTML代碼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 
}); 

Answer 9

這是基於當前的信息窗口例如在谷歌一個純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

Answer 10

我認爲最好的答案，我想出來的是在這裏： https://codepen.io/sentrathis96/pen/yJPZGx

我不能把信貸對於這一點，我分叉從另一個codepen用戶修復谷歌地圖的依賴，以實際加載的通話

請記到：

InfoWindow() // constructor