谷歌地图未显示在网页上，但显示在本地主机上

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>

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

Answer 1

将这部分代码移动到页脚页面，可能您已经绑定了地图并且 div 容器未加载属性，此外，托盘将高度添加到 id map_canvas 作为您的 css 中的默认值。

    <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

google maps api 的 url 只添加 http://，改变这一行：

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