Google Maps API v3 javascript标记不会始终加载 [英] Google Maps API v3 javascript Markers don't always load
本文介绍了Google Maps API v3 javascript标记不会始终加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个使用后台数据库的网站来跟踪javascript google api上的标记。出于某种原因，当我登录到我的网站并重定向到地图页面时，它将加载地图但没有标记。然后，如果我刷新，标记将显示。我之前没有这个问题，直到我把它移到了另一个网站上，但是所有的链接都起作用，所以它不是链接问题，据我所知。
I am creating a site that uses a database in the background to track markers on a javascript google maps api. For some reason when I log in to my site and it redirects to the maps page it will load the map but no markers. Then if I refresh, the markers will show up. I didn't have the problem before until I moved it to a different site but all of the links work so it isn't a problem with links as far as I can tell. Code is below...kinda messy so I apologize.
<?php
session_start();
if(!session_is_registered(myusername)){
header("location:login.php");
}
?>
<!DOCTYPE html >
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 92.5% }
</style>
<title>Map from Database</title>
<link rel="shortcut icon" href="../../../Desktop/kevskans/login/favicon.ico">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQeeCMHUHY9w5N5J-usSNISMRs3WsMuwk&sensor=true">
</script>
<link rel="shortcut icon" href="../../../Desktop/kevskans/login/favicon.ico">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var customIcons = {
"8 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"10 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"15 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"20 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"25 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"30 Yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"8 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"10 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"15 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"20 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"25 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"30 yard": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"8 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"10 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"15 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"20 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"25 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"30 Yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"8 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"10 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"15 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"20 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"25 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"30 yards": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = new google.maps.LatLng(40.797559 , -89.196791);
} else {
alert("Your browser doesn't support geolocation.");
initialLocation = new google.maps.LatLng(40.797559 , -89.196791);
}
map.setCenter(initialLocation);
}
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var dumpsterID = markers[i].getAttribute("dumpsterID");
var name = markers[i].getAttribute("name");
var phone = markers[i].getAttribute("phone");
var address = markers[i].getAttribute("address");
var parsedaddress = address.split(' ').join('+');
var startlocation = initialLocation;
var size = markers[i].getAttribute("size");
var pic = markers[i].getAttribute("pic");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var thing2 = "<a href='http://maps.apple.com/?daddr="+parsedaddress+"&saddr="+startlocation+"'>"+address+"</a>";
var thing = "<a href='update.php?id="+id+"'>Edit/Delete Entry</a>";
var page = "map.php";
var html = "<b> Customer: </b>" + name + "<br/><b>ID: </b>" + dumpsterID + "<br/><b>Phone: </b><a href='tel:" + phone + "'>"+phone+"</a><br/><b>Address: </b><br/>" + thing2 + "<br/><b>Size: </b>" + size + "<br/>" + thing + "<br/> <a href='"+pic+"'><img height='30' width='30' src='"+pic+"' /></a>";
var icon = customIcons[size] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.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()">
<button onclick="window.location.href='adddumpster.php'">Add Dumpster</button>
<button onclick="window.location.href='list_records.php'">Show List of Dumpsters</button>
<button onclick="window.location.href='logout.php'">Log Out</button>
<p></p>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<form action="this.form.action" id="querybysize" method="post">
<td class="formtext">Query By Size:</td>
<td><select name="size" id="size" onchange="this.form.action=this.value">
<option value="map.php">All</option>
<option value="8yardmap.php">8 Yard</option>
<option value="10yardmap.php">10 Yard</option>
<option value="15yardmap.php">15 Yard</option>
<option value="20yardmap.php">20 Yard</option>
<option value="25yardmap.php">25 Yard</option>
<option value="30yardmap.php">30 Yard</option>
</select>
<input type="submit" name="submit" id="submit" value="Query By Size">
</td>
</form>
</table>
<div id="map-canvas"/>
</body>
</html>
推荐答案
删除 onload（） 函数从身体标记中加入并将其添加到身体的末尾
remove the onload() function from the body tag and add it at the end of the body
<script>
$(document).ready(onload);
</script>
这篇关于Google Maps API v3 javascript标记不会始终加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
