谷歌地图信息窗口 - 信息框代码答案

【问题标题】：Google Maps InfoWindow - InfoBox Code谷歌地图信息窗口 - 信息框代码
【发布时间】：2011-08-17 16:21:59
【问题描述】：

我想知道是否有人可以帮助我。

我正在尝试将来自 Google 网站的“信息框”代码实施到我现有的 Javascript 代码中，但我不断收到以下错误“信息框未定义”。我已经根据原始代码检查了我的代码，但我无法找出问题所在。是否有可能有人可以看看这个并让我知道我哪里出错了。

此外，如果可能的话，我还希望有人告诉我如何让 InfoBox 出现在标记单击、平移地图以使标记在地图上居中并作为每个标记单击时，InfoBox 会移动并出现在已单击的标记旁边。

非常感谢和亲切的问候

克里斯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript" src="js/infobox.js"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            3: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

            function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("phpfile.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker"); 
            for (var i = 0; i < markers.length; i++) { 
            var locationname = markers[i].getAttribute("locationname"); 
            var address = markers[i].getAttribute("address");
            var finds = markers[i].getAttribute("finds");
            var totalfinds = markers[i].getAttribute("totalfinds");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("osgb36lat")), 
            parseFloat(markers[i].getAttribute("osgb36lon")));
            var icon = customIcons[totalfinds] || {};
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            } 
            });
            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            var html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

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

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

            } 

            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 

            </script> 
            </head> 

            <body onLoad="load()">
                <div id="map"></div>
            </body> 
            </html>

【问题讨论】：

标签： javascript google-maps-api-3 infowindow

【解决方案1】：

一种可能是您的 js/infobox.js 文件未正确加载。

【讨论】：

您好，非常感谢您回复我的帖子。我已经回到代码并重新保存它，但不幸的是我仍然遇到同样的问题。问候克里斯。

【解决方案2】：

确保“js/infobox.js”的路径正确。另外，请注意，当您声明“var ib = new InfoBox”时，ib 对于您的 load() 函数是本地的，并且会在您退出该函数时消失。使 ib 全球化可能会更好。（这是我自己对 infobox 的体验：An Alternative to the InfoWindow）

【讨论】：