GMAPS API 在本地主机上不工作
GMAPS API not working in localhost
我正在尝试执行 GMAPS API 密钥的第一个示例 https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419
在本地主机的示例网站中,但未加载地图。 API 密钥正确并与我的 google 项目核对过。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/js/main.js"></script>
</head>
<div id="content">
<div id="header">
<div id="logo">
<h1><a href="#">MiEmpresa</a></h1>
<h2><a href="" id="metamorph">Programación web a medida</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="">Inicio</a></li>
<li><a href="presupuesto.html" title="">Presupuesto</a></li>
<li><a href="galeria.html" title="">Galería</a></li>
<li><a href="localizacion.html" title="">Dónde estamos</a></li>
<li><a href="contacto.html" title="">Contacto</a></li>
</ul>
</div>
</div>
<div id="main_top">
<div id="main">
<div id="right">
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0t7voaGTqvsbCQ12MUWEfAquxMkLNBXc&callback=initMap">
</script>
</div>
</body>
</html>
假设您已连接到互联网且本地主机未离线
尝试为您的#map 添加宽度
#map {
height: 100%;
width: 500px;
}
如果可行,则应为地图 ID 和所有父容器分配适当的宽度(例如:width: 100%;)
相关问题:google maps refreshing grey
来自那个问题:
make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).
您的地图没有尺寸。如果我添加以下 css:
#right { height: 100%; }
#main {height: 500px; }
#map { height: 100%; }
地图出现。
代码片段:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#right {
height: 100%;
}
#main {
height: 500px;
}
#map {
height: 100%;
}
<div id="content">
<div id="header">
<div id="logo">
<h1><a href="#">MiEmpresa</a></h1>
<h2><a href="" id="metamorph">Programación web a medida</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="">Inicio</a>
</li>
<li><a href="presupuesto.html" title="">Presupuesto</a>
</li>
<li><a href="galeria.html" title="">Galería</a>
</li>
<li><a href="localizacion.html" title="">Dónde estamos</a>
</li>
<li><a href="contacto.html" title="">Contacto</a>
</li>
</ul>
</div>
</div>
<div id="main_top">
<div id="main">
<div id="right">
<div id="map"></div>
</div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
我正在尝试执行 GMAPS API 密钥的第一个示例 https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419
在本地主机的示例网站中,但未加载地图。 API 密钥正确并与我的 google 项目核对过。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/js/main.js"></script>
</head>
<div id="content">
<div id="header">
<div id="logo">
<h1><a href="#">MiEmpresa</a></h1>
<h2><a href="" id="metamorph">Programación web a medida</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="">Inicio</a></li>
<li><a href="presupuesto.html" title="">Presupuesto</a></li>
<li><a href="galeria.html" title="">Galería</a></li>
<li><a href="localizacion.html" title="">Dónde estamos</a></li>
<li><a href="contacto.html" title="">Contacto</a></li>
</ul>
</div>
</div>
<div id="main_top">
<div id="main">
<div id="right">
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0t7voaGTqvsbCQ12MUWEfAquxMkLNBXc&callback=initMap">
</script>
</div>
</body>
</html>
假设您已连接到互联网且本地主机未离线
尝试为您的#map 添加宽度
#map {
height: 100%;
width: 500px;
}
如果可行,则应为地图 ID 和所有父容器分配适当的宽度(例如:width: 100%;)
相关问题:google maps refreshing grey
来自那个问题:
make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).
您的地图没有尺寸。如果我添加以下 css:
#right { height: 100%; }
#main {height: 500px; }
#map { height: 100%; }
地图出现。
代码片段:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#right {
height: 100%;
}
#main {
height: 500px;
}
#map {
height: 100%;
}
<div id="content">
<div id="header">
<div id="logo">
<h1><a href="#">MiEmpresa</a></h1>
<h2><a href="" id="metamorph">Programación web a medida</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="">Inicio</a>
</li>
<li><a href="presupuesto.html" title="">Presupuesto</a>
</li>
<li><a href="galeria.html" title="">Galería</a>
</li>
<li><a href="localizacion.html" title="">Dónde estamos</a>
</li>
<li><a href="contacto.html" title="">Contacto</a>
</li>
</ul>
</div>
</div>
<div id="main_top">
<div id="main">
<div id="right">
<div id="map"></div>
</div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>