谷歌地图部分加载-wordpress

时间:2018-06-29 11:11:42

标签: php wordpress google-maps

Google map loads like this on mobile

我的网站是wordpress,而Google地图部分加载。(路由加载中,背景地图未加载,请查看所附图片)为什么会发生这种情况?这是由我的代码引起的还是Google Map错误?控制台上也没有错误。

<!---------------------------- Map ------------------------->

  <?php if (!empty($arr)) { ?>
      <script src="https://maps.googleapis.com/maps/api/js?key=<my_key>"
              type="text/javascript"></script>
      <div class="container map-container">
          <div class="overlay" onClick="style.pointerEvents='none'"></div>
          <div id="map" style="width: 100%; height: 600px;"></div>
      </div>
      <script type="text/javascript">


          var locations = <?php echo json_encode($arr); ?>;

          var map = new google.maps.Map(document.getElementById('map'), {
              scrollwheel: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });

          var infowindow = new google.maps.InfoWindow();
          var bounds = new google.maps.LatLngBounds();

          var marker, i;


          for (i = 0; i < locations.length; i++) {
              marker = new google.maps.LatLng(locations[i][1], locations[i][2]);

              new google.maps.Marker({
                  position: marker,
                  map: map
              });

              bounds.extend(marker);

              google.maps.event.addListener(marker, 'click', (function (marker, i) {
                  return function () {
                      infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                  }
              })(marker, i));
          }


          var userCoorPath = [];
          for (i = 0; i < locations.length; i++) {
              userCoorPath[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
          }

          var userCoordinate = new google.maps.Polyline({
              path: userCoorPath,
              strokeColor: "#000000",
              strokeOpacity: 1,
              strokeWeight: 2
          });
          userCoordinate.setMap(map);

          map.fitBounds(bounds);
      </script>
  <?php } ?>

  <!---------------------------- EndMap ------------------------->

0 个答案:

没有答案