即使我具有正确的身份验证密钥，Google Map API也不会显示我的地图 [英] Google map API is not displaying my map even though I have the correct authentication key
本文介绍了即使我具有正确的身份验证密钥，Google Map API也不会显示我的地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在google chrome浏览器中加载代码时，未显示Google API地图.我在Google Cloud Platform上的一个新项目中创建了身份验证密钥.
我尝试通过创建一个新项目在Google Cloud平台上生成一个新的身份验证密钥，但这似乎不起作用.
<！DOCTYPE html>< html lang ="zh-CN">< head>< style>#地图{高度:100％;}</style>< meta charset ="UTF-8">< meta name ="viewport" content ="width = device-width，initial-scale = 1.0">< meta http-equiv ="X-UA-Compatible" content ="ie = edge">< title>文档</title></head><身体>< div id ="output">完成JavaScript课程</div>< div id ="map"></div>< script src ="https://maps.googleapis.com/maps/api/js?key =<<我的密钥>>></script>< script src ="app.js">window.onload =初始化;var m = document.getElementById('map');函数init(){navigator.geolocation.getCurrentPosition(placeMap);}函数placeMap(data){var options = {中央: {纬度:data.coords.latitude，lng:data.coords.longitude}，缩放:5}var map = new google.maps.Map(m，选项);console.dir(data);}</script></body></html> 正如我已经说过的那样，google map api将不会显示我的实际位置的地图.
解决方案
发布的代码存在两个问题.
- 您的地图div没有大小，您需要定义
html和body的大小，以便#map100％高度值得参考:
< style>#地图{高度:100％;}</style> 应为:
< style>html，正文，#map {高度:100％;边距:0;填充:0;}</style> - 您的脚本标签上有不需要的
src:
< script src ="app.js"> 应该是:
< script>
html，身体 {高度:100％;边距:0;填充:0;}#地图 {高度:90％;} < div id ="output">完整的JavaScript课程</div>< div id ="map"></div>< script src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>< script>window.onload =初始化;var m = document.getElementById('map');函数init(){navigator.geolocation.getCurrentPosition(placeMap);}函数placeMap(data){var options = {中央: {纬度:data.coords.latitude，lng:data.coords.longitude}，变焦:5}var map = new google.maps.Map(m，选项);console.dir(data);}</script> Google API map not displaying when I load my code in a google chrome browser. I created my authentication key with in a new project on the Google Cloud Platform.
I've tried generating a new authentication key on the Google Cloud platform by creating a new project, but that did not seemed to work.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#map{
height:100%;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key=<<my key>>"></script>
<script src="app.js">
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude
, lng: data.coords.longitude
}
, zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
</body>
</html>
As I've already stated, the google map api will not display a map of my actual location.
解决方案
You have two issues with the posted code.
- Your map div doesn't have a size, you need to define the size of
htmlandbodyso the#map100% height has something to reference:
<style>
#map{
height:100%;
}
</style>
should be:
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
- you have an unneeded
srcon your script tag:
<script src="app.js">
should be:
<script>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
<div id="output">Complete JavaScript Course </div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script>
window.onload = init;
var m = document.getElementById('map');
function init() {
navigator.geolocation.getCurrentPosition(placeMap);
}
function placeMap(data) {
var options = {
center: {
lat: data.coords.latitude,
lng: data.coords.longitude
},
zoom: 5
}
var map = new google.maps.Map(m, options);
console.dir(data);
}
</script>
这篇关于即使我具有正确的身份验证密钥，Google Map API也不会显示我的地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
