Question

我试图在我的HTML中加入Google Map。但是地图没有显示div部分空白屏幕截图如下所示。也可以在下面找到代码。

CSS代码：

#location article{
    padding:1.5%;
    width:97%;
}
.tab-content .gmap{
    width:100%;
    height:450px;
}
.map-wrap{
    width:97%;
    padding:1.5%;
    background:#fff;
    webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);
    -moz-box-shadow:0 0 2px rgba(0,0,0,0.1);
    box-shadow:0 0 2px rgba(0,0,0,0.1);
}
.map-wrap .infoBox{
    background:url(../images/map-popup.png) no-repeat !important;
    width:180px !important;
    height:100px !important;
}
.gmap{
    border:1px solid #ccc;
    display:block;
    width:100%;
    height:550px;
}
.gmap .infoBox{
    background:url(../images/map-popup-hotel.png) no-repeat;
    width:184px;
    height:120px;
    }
.gmap strong{
    font:normal 14px 'KabelBkBTBook',sans-serif;
    margin:0 0 13px;
    display:inline-block;
}
.infoBox{
    font:normal 1.2em/1.42 'KabelBkBTBook',sans-serif;
    margin:-100px 0 0 50px;
    display:inline-block;
    padding: 8px 10px;
    color:#fff;
}

JavaScript代码：

<script type="text/javascript">
    function initialize() {
        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
             zoom: 15
            ,center: secheltLoc
            ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


        var marker = new google.maps.Marker({
            map: theMap,
            draggable: true,
            position: new google.maps.LatLng(49.47216, -123.76307),
            visible: true
        });

        var boxText = document.createElement("div");
        boxText.innerHTML = "<strong>MGH World</strong><br />1400 Pennsylvania Ave,<br />Washington DC<br />www.bestipsumhotel.com";

        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,closeBoxURL: ""
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(theMap, this);
        });

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);
    }
</script>

HTML代码：

            <div id="location" class="tab-content">
                <article>
                    <!--map-->
                        <div class="gmap" id="map_canvas"></div>
                    <!--//map-->
                </article>
            </div>

附加脚本：

[HTML Body中附带的脚本] [1]

Answer 1

您的代码返回错误：

Uncaught ReferenceError: InfoBox is not defined

没有像

这样的信息框来源的链接

<script src='../../js/infobox.js'></script>

此外，我没有看到是否有加载地图的调用，如

    ...
        ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    //ib.open(theMap, marker);

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(theMap, this);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

请参阅完整的code at jsbin。

谷歌地图在HTML上不可见

1 个答案: