Question

＆＃13;

/* This is the javascript function that makes the map load */
  function initMap() {
    var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {
        lat: 44.540,
        lng: -78.546
      },
      zoom: 8
    });
  }

＆＃13;

/* This is the basic css */

#map {
  width: 500px;
  height: 400px;
}

＆＃13;

<!-- Javascript called into the html page -->

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>

</html>

＆＃13;

Answer 1

您需要添加一个DOM侦听器，它将在窗口加载时执行initMap()函数。

试试这个

＆＃13;

function initMap() {
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(44.540, -78.546),
    zoom: 8
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

＆＃13;

#map {
  width: 500px;
  height: 400px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div id="map"></div>

＆＃13;

Answer 2

你的函数没有调用use $（document）.ready（function（）（））来调用你的函数

＆＃13;

<!DOCTYPE html>
<html>
  <head>
   <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
     <script src="https://maps.googleapis.com/maps/api/js"></script>
     <script>
 $(document).ready(function() {
  var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: 44.540, lng: -78.546},
      zoom: 8
    });
   
});
     </script>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
     
  </body>
</html>

＆＃13;

为什么我的网站上没有谷歌地图显示，我一直在使用开发者网站？

2 个答案: