2
我正在創建一個網站,該網站使用後臺數據庫跟蹤javascript google maps api上的標記。出於某種原因,當我登錄到我的網站並重定向到地圖頁面時,它將加載地圖但沒有標記。然後,如果我刷新,標記將顯示。我之前沒有這個問題,直到我把它移到了另一個網站上,但是所有的鏈接都起作用,所以它不是鏈接問題,據我所知。代碼在下面...有點亂,所以我很抱歉。Google Maps API v3 javascript標記不總是加載
<?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>
一半它工作的時間的末尾添加它。現在我正在註銷並重試,沒有問題。 – maximeismer
你想做什麼?我沒有在這裏看到任何谷歌地圖標記相關的代碼 –
標記代碼在下載URL函數下,因爲它從數據庫中提取。 「變種標記=新google.maps.Marker({ 圖:圖, 位置:點, 圖標:icon.icon, 陰影:icon.shadow」 問題不與標記在。它的調試窗口都圍繞着是否定義了「initialLocation」,並且由於某種原因它並不總是定義它。我一直在研究代碼,現在我將編輯它。 – maximeismer