Google MAPS JS API不加载

如果你想简单地显示一个地图与你的坐标使用谷歌然后做如下。这将显示地图和你的lat和液化天然气。

CSS:

 #map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
   }

<div id="map"></div> /* Place on your page

把这个放在带钥匙的/身体标签前

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
    </script>   

还有JS脚本,它同样是关于/body的位置

<script>
function initMap() {
// The location of Uluru
   var uluru = {lat: 51.5087420, lng: -0.120850};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 10, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>

你的代码是正确的。你只要打电话给 myMap() 函数一旦定义。 尝试运行下面的代码片段。(与您的代码相同,还有一行用于调用 功能)

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
  };
  var map = new google.maps.Map(document.getElementById("map-container-5"), mapProp);
}

myMap();

<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyC7q_f_aMi9o-hoSl3PYSVHRlN99AU3nBg"></script>

你使用的API密钥是W3Schools one!当你的地图有很多视图时,API键被Google用来要钱。

你可以在 https://cloud.google.com/maps-platform/ 但你也需要注册你的信用卡(或假卡)。

注意你 如果您的项目是本地的(不通过HTTP提供),则需要API密钥。

(你也没打电话 myMap ,请务必添加 myMap() 在代码的末尾。)

我的地图 “功能。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap" async defer></script>

然后要用密钥替换代码中的“YOUR_API_KEY”。 和“myMap”,函数名在本例中是相同的(myMap)

高度 宽度 ,并确保 div

 <div id="map-container-5" class="z-depth-1" style="height: 200px; width:200px;"></div>

并尝试删除mapProp中的最后一个逗号

var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5
};

myMap() .. 所以也可以直接使用

<script>
   var mapProp= {
      center:new google.maps.LatLng(51.508742,-0.120850),
      zoom:5
    };

    var map=new google.maps.Map(document.getElementById("map-container- 5"), mapProp);
</script>

然后签入javascript控制台。。因为错误