GMAPS API在本地主机

-1

IM工作不试图执行GMAPS API密钥https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419 GMAPS API在本地主机

在本地主机例如网站的第一个例子，但地图犯规负荷。该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>

来源

2016-10-04 Pablo Barrios

线索可能是您的浏览器控制台 – charlietfl

你的地图格没有大小。 – geocodezip

相关问题：google maps refreshing grey

从这个问题：

确保在显示地图的div有一个有效的大小，如果它是隐藏的，它将有大小为零，你将需要显示的DIV前，将有有效的大小。如果使用百分比确定其大小，请确保其所有父元素都具有百分比大小或特定大小（请参阅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"> 
 
</script>

来源

2016-10-04 20:37:35 geocodezip

谢谢，它解决了我的问题。 ;） –

假设你连接到看房和本地主机未处于脱机状态

尝试增加的宽度到您#map

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

如果工作，那么你应该指定适当的宽度（例如：width：100％;）到地图id和所有父级容器

来源

2016-10-04 20:32:16 scaisEdge

GMAPS API在本地主机

回答

相关问题