Google Maps API v3 javascript標記不總是加載

我正在創建一個網站，該網站使用後臺數據庫跟蹤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>

來源

2013-06-25 maximeismer

一半它工作的時間的末尾添加它。現在我正在註銷並重試，沒有問題。 – maximeismer

你想做什麼？我沒有在這裏看到任何谷歌地圖標記相關的代碼 –

標記代碼在下載URL函數下，因爲它從數據庫中提取。「變種標記=新google.maps.Marker（{ 圖：圖，位置：點，圖標：icon.icon，陰影：icon.shadow」問題不與標記在。它的調試窗口都圍繞着是否定義了「initialLocation」，並且由於某種原因它並不總是定義它。我一直在研究代碼，現在我將編輯它。 – maximeismer

從身體標記刪除onload()功能和身體

<script> 
    $(document).ready(onload); 
</script>

來源

2013-06-25 19:52:52

Google Maps API v3 javascript標記不總是加載

回答

相關問題