谷歌地圖自定義內容框？

Question

我似乎無法在Google Maps V3文檔中找到關於爲Google地圖創建自定義內容框的文檔。

下面是一個自定義的內容框的例子：

http://www.apple.com/retail/alamoana/map/

我的問題是...你如何去更改默認的白色氣球彈出？

乾杯！

Answer 1

看在v3 utility libraries信息框工具更具體。我在dev.mapfaire.com上使用它們，如果你想看看。

Answer 2

這個例子是使用谷歌地圖的第二個版本。該功能在第三個功能中可能無法使用。

但您可以在infowindows中添加任何html代碼並對其進行個性化設置。我不確定您是否可以直接改變它們的外觀，但是您絕對可以改變內容的外觀。

編輯：我發現了一些示例代碼：http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

Answer 3

在gmaps-utility-library-dev看一看，在ExtInfoWindow utility和PopupMarker utility

Answer 4

正如Sudhir指出的那樣，Infobox插件是一種實現您想要的功能的方法。我最近回答了關於using the infobox plugin for google maps api 3的類似問題，並提供了一個完整的示例。

Answer 5

就我個人而言，我不使用任何谷歌的自定義覆蓋腳本等。我創建了一個自定義的php頁面，其中包含iframe，我可以在其中加載自定義css文件，還可以創建自定義的DIV，這些自定義的DIV會在地圖上方重新定位，然後在打開時拖動。

您可以使用「Drag，Dragstart，Dragend」事件來幫助您重新定位已創建的元素。

如果已經設置到你網頁自定義標記你可以用這個功能的像素位置：

getPosition: function (marker) { 
     var map = this.map /* Your map, in my case is part of my controller object linked to this.map */; 
     var scale = Math.pow(2, map.getZoom()); 
     var nw = new google.maps.LatLng(
      map.getBounds().getNorthEast().lat(), 
      map.getBounds().getSouthWest().lng() 
     ); 
     var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); 
     var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition()); 
     var pixelOffset = new google.maps.Point(
      Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), 
      Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) 
     ); 
     return pixelOffset; /* Returns the top left pixel of the specified marker on the specified map */ 
    } 

然後我用它當窗口被拖動使用setPosition兩種功能，它設置您的自定義元素的位置到標記的位置。 拖動事件可以這樣設置： google.maps.addEventListener（map，'drag'，function（）{setPosition（marker，element）;}）;

SETPOSITION功能功能簡單地收集的寬度，元件的高度，並且像素偏移相關聯，以使用爲getPosition（標記）功能標記：

setPosition: function (marker,element) { 
    var p = this.getPosition(marker), 
     s = {width:element.offsetWidth,height:element.offsetHeight}, 
     markerOffset = {width:58,height:58}; 
    element.style.left = p.x - (s.width/2) + (markerOffset.width/2) + "px"; /* We set the element's left position to the marker's position + half of our element's width + half of the marker's width's so it is centered */ 
    element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element's top position to the marker's position + our element's height + markers height so it is 10px above our marker vertically */ 
}, 

有時你必須考慮外部的一個位盒子