Question

所以我试图在网站上实现谷歌地图，并在我的本地主机上它工作正常，我看得很完美。但是，当我将此上传到我的托管公司时，地图根本没有显示。当我检查元素并检查控制台时，我没有看到任何错误。代码如下：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var myLatlng = new google.maps.LatLng(53.092975, -7.895479);

    var mapOptions = {
      center: myLatlng,
      zoom:16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'LCCEurotex'
    });

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

我不知道是什么导致它，因为我的代码看起来与谷歌文档中的代码相同。关于什么可能导致它的任何想法都会很棒。谢谢你的帮助！

Answer 1

将这部分代码移动到页脚页面，可能你已经绑定了地图并且div容器没有加载属性，另外，托盘在你的css中默认为id map_canvas添加了一个高度。

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(53.092975, -7.895479);

        var mapOptions = {
          center: myLatlng,
          zoom:16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'LCCEurotex'
        });


      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

在你的CSS中

div#map-canvas {
  height: 500px !important;
}

Answer 2

仅将http：//添加到google maps api的url，更改此行：

<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script>

由此：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Google地图未在网页上显示，但在localhost上显示

2 个答案: