信息框未显示在Google地图中

Question

我试图在Google地图上使用信息框从我的数据库（使用API​​ v3）显示标记上的数据。事实上，Infowindows的工作非常完美，但我想对它们进行设计，这就是我切换到Infobox的原因。但它们并没有像我期望的那样出现在Infowindows中。

ViewMap.php

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script type="text/javascript"> 
    var infowindow; 
    var map; 
    var infobox; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(6.796396,79.877823); 
    var myOptions = { 
     zoom: 13, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
    var transitLayer = new google.maps.TransitLayer(); 
    transitLayer.setMap(map); 
    downloadUrl("generateXml.php", function(data) { 
     data = xmlParse(data); 
     var markers = data.documentElement.getElementsByTagName("marker"); 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     bounds.extend(latlng); 
     var marker = createMarker(markers[i].getAttribute("nom"),markers[i].getAttribute("descripcio"), latlng); 
     } 
     map.fitBounds(bounds); 
    }); 
    } 
    function createMarker(nom,descripcio,latlng) { 
    var marker = new google.maps.Marker({ 
     title:nom, 
     position: latlng, 
     map: map 
    }); 
    infobox = new InfoBox({ 
     content: descripcio, 
     disableAutoPan: false, 
     maxWidth: 150, 
     pixelOffset: new google.maps.Size(-140, 0), 
     zIndex: null, 
     boxStyle: { 
     background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
     opacity: 0.75, 
     width: "280px" 
     }, 
     closeBoxMargin: "12px 4px 2px 2px", 
     closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
     infoBoxClearance: new google.maps.Size(1, 1) 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infobox.open(map, marker); 
     map.panTo(latlng); 
    }); 
    return 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> 

Answer 1

资讯盒需要地图的API，你必须加载地图的API 以前 infobox.js

此外： 您正在使用相同的信息框每个标记（存储在全局信息框变量中，每次调用createMarker时都会覆盖此变量，所以最后一个标记将定义用于每个标记的信息框）。
最后创建的标记的描述属性为空，这就是信息框没有任何内容的原因。

解决方法：添加了var关键字，使信息框私营：

var infobox = new InfoBox({/*options*/}) 

Answer 2

从谷歌看到这个示例页面。我用它作为模板，效果很好。 https://developers.google.com/maps/articles/phpsqlajax_v3