使用EJS在网页上呈现谷歌地图api

Question

I am using EJS to render google maps api on a webpage.我正在使用 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>

I am getting 200's in my network tab but nothing is rendering on the page, am i doing something wrong with the syntax?我的网络选项卡中有 200 个，但页面上没有任何内容呈现，我的语法有问题吗？

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

Answer 2

you must fix style = "height:xx";你必须修正 style = "height:xx"; at your html, body and #map they are set to 0 by default在您的 html、body 和 #map 中，它们默认设置为 0

使用EJS在网页上呈现谷歌地图api

问题描述

2 个解决方案

解决方案1
0 2016-07-01 03:29:48

解决方案2
0 2020-12-17 18:59:44

使用EJS在网页上呈现谷歌地图api

问题描述

2 个解决方案

解决方案1 0 2016-07-01 03:29:48

解决方案2 0 2020-12-17 18:59:44

解决方案1
0 2016-07-01 03:29:48

解决方案2
0 2020-12-17 18:59:44