Javascript 谷歌地图定制信息框

我正试图按照这个例子合并一个定制的信息框，但我的代码就是不起作用。有人能看看我哪里出了问题吗

我已经说明了示例代码的开始/结束位置以及我试图调用它的位置

function initialize() {

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  scrollwheel: false
};

var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
    content: "loading..."

});
}

var sites = [
    // List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>'],
];

function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4],
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png"
    });
    // Begin example code to get custom infobox
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    // end example code for custom infobox

    google.maps.event.addListener(marker, "click", function () {

        infowindow.setContent(this.html);
        // Call myOptions when marker is clicked and opened
        infowindow.open(map, myOptions, this);
    });
}
}

google.maps.event.addDomListener(window, 'load', initialize);

函数初始化（）{
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（52.204872,0.120163），
mapTypeId:google.maps.mapTypeId.ROADMAP，
风格：风格，
滚轮：错误
};
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
设置标记（地图、地点）；
infowindow=新建google.maps.infowindow({
内容：“正在加载…”
});
}
变量站点=[
//列出每个引脚的所有位置
[The Frontroom'，52.202977,0.138938,1'，The Frontroom.
剑桥格威迪尔街23-25号，CB1 2LG
01223 305 600
，
];
函数集合标记（映射、标记）{
对于（var i=0；i

请确保此是否包含属性html。因为它指的是当时的标记

google.maps.event.addListener(marker, "click", function () 
{

    infowindow.setContent(this.html);
    // Call myOptions when marker is clicked and opened
    infowindow.open(map, myOptions, this);
});

---

同时也要尽量限制你的全局性。请试试这个

好的，然后从html/jsp中的include获取inbox.js文件。您还需要从代码中删除infowindow对象

并使用

function setMarkers(map, markers) {
  ......// same as your code
  var ib = new InfoBox(myOptions);
  google.maps.event.addListener(marker, "click", function (e) {
        ib.open(map, this);
    });
  .....//same as your code
}

---

如果你第一次不成功，我们可能需要尝试几次。请每次发布修改后的代码和结果。

同时删除现有代码的这一部分：

google.maps.event.addListener(marker, "click", function () {

    infowindow.setContent(this.html);
    // Call myOptions when marker is clicked and opened
    infowindow.open(map, myOptions, this);
});

将其替换为InfoBox示例中的以下内容：

var ib = new InfoBox(myOptions);

google.maps.event.addListener(marker, "click", function (e) {
  ib.open(map, this);  // change the map variable appropriately
});

对于多个点，请使用函数闭包（createMarker函数）来维护标记和信息框之间的关联：

function createMarker(site, map){
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: site[0],
        zIndex: site[3],
        html: site[4] /* ,
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" this icon no longer available */
    });
    // Begin example code to get custom infobox
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = marker.html;

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };
    // end example code for custom infobox

    google.maps.event.addListener(marker, "click", function (e) {
     ib.close();
     ib.setOptions(myOptions);
     ib.open(map, this);
    });
    return marker;
}

function setMarkers(map, markers) {

 for (var i = 0; i < markers.length; i++) {
   createMarker(markers[i], map);
 }
}

函数createMarker（站点、地图）{
var siteLatLng=新的google.maps.LatLng（站点[1]，站点[2]）；
var marker=new google.maps.marker({
职位：siteLatLng，
地图：地图，
标题：站点[0]，
zIndex:site[3]，
html:site[4]/*，
图标：“http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png“此图标不再可用*/
});
//开始示例代码以获取自定义信息框
var-boxText=document.createElement（“div”）；
boxText.style.cssText=“边框：1px纯黑色；页边距顶部：8px；背景：黄色；填充：5px；”；
boxText.innerHTML=marker.html；
变量myOptions={
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（-140,0）
，zIndex:null
，boxStyle:{
背景：“url（'http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif“）不要重复”
，不透明度：0.75
，宽度：“280px”
}
，closeBoxMargin:“10px 2px 2px 2px”
，closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
，infoBoxClearance:newgoogle.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
//自定义信息框的结束示例代码
google.maps.event.addListener（标记“单击”，函数（e）{
ib.close（）；
ib.setOptions（myOptions）；
ib.open（map，this）；
});
返回标记；
}
函数集合标记（映射、标记）{
对于（var i=0；i

---

控制台窗口中的输出是什么？页面加载没有错误，当我单击一个pin时，我得到以下错误：“未捕获的TypeError:Object”没有方法“get”可能有到特定页面的链接？是的，-地图在底部只是一个猜测，但是，您是否可以尝试在顶部声明

map

变量，而不是在

initialize

函数中声明变量？您是对的，我做了更改。非常感谢你指出这一点。我在这里发布了一个问题