未显示带有Infobox PHP/SQL的Google Map API v3
当我试图将自定义infobox与GoogleAPIv3PHP/SQL数据库一起使用时，我遇到了一个当前的问题。我最难弄清楚我在哪里搞砸了，分区显示为空白而没有地图。任何帮助都会很棒未显示带有Infobox PHP/SQL的Google Map API v3,php,javascript,sql,google-maps-api-3,Php,Javascript,Sql,Google Maps Api 3,当我试图将自定义infobox与GoogleAPIv3PHP/SQL数据库一起使用时，我遇到了一个当前的问题。我最难弄清楚我在哪里搞砸了，分区显示为空白而没有地图。任何帮助都会很棒 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="http:
<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>
var customIcons={
诊所：{
图标：“icon_2.png”，
},
中学：{
图标：“icon_1.png”，
}
};
函数初始化（）{
var map=new google.maps.map（document.getElementById（“map_canvas”）{
中心：新google.maps.LatLng（47.6145，-122.3418），
缩放：13，
滚轮：错误，
mapTypeId:“路线图”
});
下载URL（“xml.php”，函数（数据）{
函数createMarker（markerXML）{
var name=markerXML.getAttribute（“名称”），
postid=markers[i].getAttribute（“post_id”），
地址=标记[i].getAttribute（“地址”），
phone=markers[i].getAttribute（“phone”），
listtype=标记[i].getAttribute（“类型”），
星期一=标记[i].getAttribute（“星期一”），
星期二=标记[i].getAttribute（“星期二”），
星期三=标记[i].getAttribute（“星期三”），
星期四=标记[i].getAttribute（“星期四”），
星期五=标记[i].getAttribute（“星期五”），
星期六=标记[i].getAttribute（“星期六”），
sunday=markers[i].getAttribute（“sunday”），
类型=标记[i]。getAttribute（“类型”），
point=新的google.maps.LatLng(
lat=parseFloat（markerXML.getAttribute（“lat”），
lng=parseFloat（markerXML.getAttribute（“lng”），
icon=customIcons[type]|{}，
marker=新的google.maps.marker({
地图：地图，
位置：新google.maps.LatLng（lat，lng），
icon:icon.icon，
}),
boxText=document.createElement（“div”）；
boxText.style.cssText=“边框：1px纯黑色；页边距顶部：8px；背景：黄色；填充：5px；”；
boxText.innerHTML=“+name+”
“+listtype+”
“+address+”
“+phone+”
“+周一+周二+周三+周四+周五+周六+周日；
变量myOptions={
内容：boxText，
disableAutoPan:错，
最大宽度：0，
pixelOffset:new google.maps.Size（-140,0），
zIndex:null，
箱式：{
背景：“url（'tipbox.gif'）不重复”，
不透明度：0.75，
宽度：“280px”
},
closeBoxMargin：“10px 2px 2px 2px”，
closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance:new google.maps.Size（1,1），
伊希登：错，
窗格：“浮动窗格”，
enableEventPropagation:false
};
var infoBox=新的infoBox（myOptions）；
google.maps.event.addListener（标记，'click'，函数（）{
打开（地图、标记）；
}
});
}
var xml=data.responseXML，
markers=xml.documentElement.getElementsByTagName（“标记”），
numMarkers=markers.length；
对于（变量i=0；i
查看javascript控制台并修复您在那里发现的错误。只需注释掉dowloadUrl调用，您就可以返回地图 您没有提供xml示例，但第二步（在修复javascript错误后）是在浏览器中打开xml提要，看看它是否有效（或者可以通过xml验证器运行） （看起来您可能从中开始）还提供了一些调试建议
在您的代码geocodezip之上，它工作得很好。我必须将var xml=xmlParse（data）；切换到var xml=data.responseXML；抱歉，我应该提到这一点。我有一个自定义版本的downloadxml.js，我更改了该版本，以帮助我在本地更轻松地调试。如果我的答案有帮助/有效，您应该接受答案。
<div id="map_canvas" style="width: 500px; height: 300px"></div>