没有显示带有Infobox PHP/SQL的Google Map API v3

Not being displayed Google Map API v3 with Infobox PHP/SQL

本文关键字：Google Map API v3 SQL 显示 Infobox PHP      更新时间：2023-09-26

当我尝试使用自定义信息框与google API v3 PHP/SQL数据库时，我遇到了一个当前问题。我最难弄清楚我把哪里搞砸了，div显示为空白，而不是地图。任何帮助都会很棒！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<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 customIcons = {
  Clinic: {
    icon: 'icon_2.png',
  },
  Secondary: {
    icon: 'icon_1.png',
  }
};
function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        scrollwheel: false,
        mapTypeId: 'roadmap'
    });

    downloadUrl("xml.php", function(data) {
        function createMarker(markerXML) {
            var name = markerXML.getAttribute("name"),
                postid = markers [i].getAttribute("post_id"),
                address = markers[i].getAttribute("address"),
                phone = markers[i].getAttribute("phone"),          
                listtype = markers[i].getAttribute("type"),
                monday = markers[i].getAttribute("monday"),
                tuesday = markers[i].getAttribute("tuesday"),
                wednesday = markers[i].getAttribute("wednesday"),
                thursday = markers[i].getAttribute("thursday"),
                friday = markers[i].getAttribute("friday"),
                saturday = markers[i].getAttribute("saturday"),
                sunday = markers[i].getAttribute("sunday"),
                type = markers[i].getAttribute("type"),
                point = new google.maps.LatLng(
                lat = parseFloat(markerXML.getAttribute("lat")),
                lng = parseFloat(markerXML.getAttribute("lng")),

                icon = customIcons[type] || {},
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(lat, lng),
                    icon: icon.icon,
                }),
                boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "<b>" + name + "</b> <br/> <i>" + listtype + "</i> <br/>" + address + "<br/>" + phone + "<br/>" + monday + tuesday + wednesday + thursday + friday + saturday + sunday;
            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 infoBox = new InfoBox(myOptions);
            google.maps.event.addListener(marker, 'click', function () {
                    infoBox.open(map, marker);
                }
            });
        }
        var xml = data.responseXML,
            markers = xml.documentElement.getElementsByTagName("marker"),
            numMarkers = markers.length;
        for (var i = 0; i < numMarkers; i++) {
            createMarker(markers[i]);
        }
    });
}
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>    


<div id="map_canvas" style="width: 500px; height: 300px"></div>

查看javascript控制台并修复您在其中发现的错误。只要对dowloadUrl调用进行注释，就可以拿回你的地图。

您没有提供xml的示例，但第二步（在修复javascript错误之后）是在浏览器中打开xml提要，看看它是否有效（或者您可以通过xml验证器运行它）

这篇文章（看起来你可能已经开始了）也提供了一些调试建议。

工作版本

相关文章：