无法在我的地理位置 api 结果中获得 *MAP*答案

【问题标题】：unable to get *MAP* in my geolocation api result无法在我的地理位置 api 结果中获得 *MAP*
【发布时间】：2020-07-19 19:37:40
【问题描述】：

我正确地得到了我的纬度和经度位置，但谷歌地图在我的文档中不可见，尽管我的 api 密钥是正确的......我无法在我的结果中获得谷歌地图
帮我解决这个问题，通过 googlemap 获取纬度和经度……它是一个简单的 html 文档，带有内部 css 和 java 脚本文件。为什么我没有地图？？这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>location map</title>
    <style>
        

   *{
            padding: 0;margin: 0;

    }
    body{
        width: 100%;
        height: 100%;
    }
     #button-layer{
        width: 500px;
        height: 200px;
        margin: 10px;   
        text-align:center;
        margin: auto;


    }
    #map-button{
        font-size: 30px;
        color: red;
        background-color: yellow;
        font-weight: bold;
        width: 300px;
        height: 60px;
        margin: 10px;
        text-align: center; 
        border: 2px solid black;

    }


       #map{
         height: 100%;
            width: 100%;
          }
    p{
        text-align:center;
        font-size: 30px;
        font-weight: bold; 
    }

    </style>
    </head>
     <body>
     <h1><center>get your current location</center></h1>
      <br><br>
      <div id="button-layer">
      <button id="map-button" type="button" onclick="locate()">my current 
     location</button>
      </div>
     <p id="demo"></p>
     <div id="map"></div>



   <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=********- 
  nRPS4GJX4z3HKc3YmH8jjdCXE&callback=initMap">
</script>
<script >
    
    var map;
    function initMap() {
        var mapLayer = document.getElementById("map");
        var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
        var defaultOptions = { center: centerCoordinates, zoom: 4 }
        map = new google.maps.Map(mapLayer, defaultOptions);
    }
   
    var x= document.getElementById("demo");
    function showLocation(position){
       var latitude = position.coords.latitude;
       var longitude = position.coords.longitude;
       x.innerHTML="latitude:"+latitude+"and longitude:"+longitude;
       var infoWindowHTML = "latitude:"+latitude+"<br> longitude:"+longitude;
       var infoWindow = new google.maps.InfoWindow({map: map, content: infoWindowHTML});
       var currentLocation = { lat:latitude, lng:longitude };
       infoWindow.setPosition(currentLocation);
       document.getElementById("map-button").style.display = 'none';
     }


     function errorHandler(err){
        if(err.code==1){
           alert("Error: Access is denied!");
        }
        else if(err.code==2){
           alert("Error: Position is unavailable!");
        }
     }
    
     function locate(){
        document.getElementById("map-button").disabled=true;
        document.getElementById("map-button").innerHTML="processing..."
        if(navigator.geolocation){
          
         navigator.geolocation.getCurrentPosition(showLocation,errorHandler);
        }
        else{
            x.innerHTML="geolocation is not supported in this browser";
       }
    }
</script>

【问题讨论】：

请提供minimal reproducible example，包括任何必需的 HTML/CSS。你的 <div> is="demo" 有大小吗？
@geocodezip 现在我已经为你提供了完整的 html 和 css 部分。请帮帮我。

标签： javascript html google-maps geolocation

【解决方案1】：

这似乎与现在在您的 API 上启用的 maps js 服务（Maps JavaScript API）有关，或者您的密钥可能受到限制。

从谷歌文档中试试这个例子 - https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja#step_2_add_a_map_with_a_marker

只需将您的密钥放在这里并检查控制台日志是否有错误，基于此您可以看到出了什么问题。

【讨论】：