[英]Google maps not showing, HTML
I'm currently working on an IP tracking program, but I have some problems with the google maps function, I can't get the map to show or put a marker on the IP location.我目前正在开发一个 IP 跟踪程序,但我在使用 google 地图功能时遇到了一些问题,我无法让地图显示或在 IP 位置上放置标记。 Can anyone point me in the right directions?任何人都可以指出我正确的方向吗?
Here is the code I've used for the map, I took it from googles own website.这是我用于地图的代码,我从谷歌自己的网站上获取。
<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=AIzaSyAnoX8LSgSg5-pRiF5_IzZ313VsNZzuo-4&callback=initMap"
async defer></script>
To show map you need to provide height
. 要显示地图,您需要提供height
。
Add this height in your style for div with id map
在样式添加这个高度与ID DIV map
#map {
height: 300px;
}
Update: 更新:
if map container (with id map) should take up 100% of the height of the HTML body. 如果地图容器(带有id的地图)应占据HTML主体高度的100%。 Note that we must specifically declare those percentages for and as well. 请注意,我们还必须同时为和声明这些百分比。
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys mw.m @ util.js:220 util.js:220 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key Google Maps JavaScript API警告:NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys mw.m @ util.js:220 util.js:220 Google Maps JavaScript API警告:InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
In my case, div was like就我而言, div 就像
<div id="map" style="height: 100%; width: 100%"></div>
but map appeared only when I've add position: absolute property explicitly.但地图仅在我明确添加 position: absolute 属性时出现。 So, the result was所以,结果是
<div id="map" style="height: 100%; width: 100%; position: absolute"></div>
and it works.它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.