谷歌地图自定义内容框？

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 */ 
}, 

有时你必须考虑外部的一个位盒子