Php 谷歌地图部分加载-wordpress

我的网站是wordpress，谷歌地图部分加载。（路线加载，背景地图不是，请看附件图片）为什么会发生这种情况？这是我的代码造成的还是谷歌地图的错误？控制台上也没有错误

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

var位置=；
var map=new google.maps.map（document.getElementById（'map'）{
滚轮：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var bounds=new google.maps.LatLngBounds（）；
var标记，i；
对于（i=0；i

地图div在页面加载时不立即可见？map div显示在页面加载后显示的一个单独选项卡中？检查map div并检查是否由google maps在其上实现css，或者尝试将map div放置在容器类之外。有时由于互联网速度较慢，我也会遇到此类问题。我尝试过检查，但没有任何影响。我甚至尝试暂时删除我的css文件夹。仍然只有灰色方框和城市之间的线条显示。