javascript - Google Maps API v3 javascript 标记并不总是加载

标签 javascript php mysql google-maps-api-3 markers

我正在创建一个网站，该网站在后台使用数据库来跟踪 javascript google map api 上的标记。由于某种原因，当我登录我的网站并重定向到 map 页面时，它将加载 map 但没有标记。然后，如果我刷新，标记就会显示出来。我之前没有遇到过这个问题，直到我将其移动到另一个站点，但所有链接都有效，因此据我所知，这不是链接问题。代码如下...有点乱，所以我道歉。

    <?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>

最佳答案

从body标签中删除onload()函数并将其添加到body末尾

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

关于javascript - Google Maps API v3 javascript 标记并不总是加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17305054/

上一篇：mysql - 基于字段的运行计数

下一篇：mysql 有语句不返回行

相关文章：

javascript - Stackoverflow 使用 localstorage 进行授权似乎不安全。这是正确的，否则我们如何加强它？

javascript - 未捕获的类型错误 :JavaScript

php - MySQL - 输出时在与关系表连接的表上获取重复行

javascript - 根据所选选项显示 SQL 查询

php - 无法使用 JQuery 获取 href 属性

mysql - 两个表之间的 "Join"非常快，而 "Left join"则非常慢(MySQL DB)

javascript - 在 Canvas 上画线，但最后的线已经褪色

javascript - 推送到 Backbone 中的属性

php - 使用 PDO 查询生成 CSV 下载

php - 复杂的嵌套数组问题

©2024 IT工具网  联系我们