使用 EJS 在网页上呈现 google maps api答案

【问题标题】：using EJS to render google maps api on webpage使用 EJS 在网页上呈现 google maps api
【发布时间】：2016-11-03 08:12:11
【问题描述】：

我正在使用 EJS 在网页上呈现 google maps api。

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer>
  </script>
</body>

</html>

我的网络选项卡中有 200 个，但页面上没有呈现任何内容，我的语法有问题吗？

【问题讨论】：

标签： javascript html node.js google-maps ejs

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

【讨论】：

可能值得指出这来自哪里/为什么这对未来的读者有用。

【解决方案2】：

你必须修正 style = "height:xx"; 在你的 html、body 和 #map 它们默认设置为 0

【讨论】：