GMAPS API在本地主机上不工作

我正在尝试执行GMAPS API密钥的第一个示例https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419

在localhost的一个示例网站，但地图不加载。API密钥是正确的，并与我的谷歌项目检查。

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

相关问题:Google地图刷新灰色

从那个问题:

确保显示地图的div有一个有效的大小，如果它是隐藏的，它的大小将为零，您将需要在它有一个有效的大小之前显示div。如果它使用百分比大小，请确保它的所有父元素都具有百分比大小或特定大小(请参阅Mike Williams关于该主题的Google Maps API v2教程了解详细信息)。

你的地图没有大小。如果我添加以下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>

假设您连接到internet并且本地主机未脱机

尝试给#map添加一个宽度

    #map {
        height: 100%;  
        width: 500px;
   }

如果工作，那么你应该分配一个适当的宽度(例如:宽度:100%;)到map id和所有的父容器

相关内容

最新更新

热门标签：