如何在基本的 html 框架中设置 gmaps.js答案

【问题标题】：How to setup gmaps.js in a basic html skeleton如何在基本的 html 框架中设置 gmaps.js
【发布时间】：2019-10-17 03:07:02
【问题描述】：

大家

我在一个小项目中设置 gmap 时遇到了一些麻烦。

请注意，api 密钥输入不正确。

我只是在他们的文档中复制了他们的一个示例。

<html>
<head>
    <title>Test App</title>
    <script src="js/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZWTTkguiQpNFtckx_x_x_x_xI&libraries=places"
    async defer></script>
    <!-- <script src="http://maps.google.com/maps/api/js"></script> -->
    <script src="./js/gmaps.js"></script>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/map.css">
    <script type="text/javascript">
        var map;
        $(function(){
            map = new GMaps({
                el: '#map',
                lat: -12.043333,
                lng: -77.028333,
                zoomControl : true,
                zoomControlOpt: {
                    style : 'SMALL',
                    position: 'TOP_LEFT'
                },
                panControl : false,
                streetViewControl : false,
                mapTypeControl: false,
                overviewMapControl: false
            }); 
        });
    </script>
    <style>
        body { 
            font-family : 'Helvetica Neue','arial',sans-serif;
            font-size : 15px;
        }

        #map {
            height :100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-2x mb-2" style="font-size: 20px;">
            Mapp
        </h1>

        <h3>How it works ?</h3>

    <!-- insert map -->
    <div id="map"></div>
</body>
</html>

当我尝试打开 google chrome 开发者工具时，出现错误提示：

需要 Google 地图 API。请注册以下JavaScript 图书馆https://maps.googleapis.com/maps/api/js.

【问题讨论】：

不能注释掉<script>标签
仍然无法显示地图@geocodezip

标签： jquery google-maps gmaps.js

【解决方案1】：

问题：

发布的 HTML 中有错字（缺少 <div class="container"> 的结尾 </div>）。
CSS 不适用于百分比大小，它需要定义包含元素的大小（可以通过定义html, body { height: 100%; } 来完成，请参阅相关问题：Responsive Google Maps v3 - Cannot get 100% height

proof of concept fiddle

代码 sn-p：

var map;
$(function() {
  map = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333,
    zoomControl: true,
    zoomControlOpt: {
      style: 'SMALL',
      position: 'TOP_LEFT'
    },
    panControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    overviewMapControl: false
  });
});

body {
  font-family: 'Helvetica Neue', 'arial', sans-serif;
  font-size: 15px;
}

.container {
  height: 70%;
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/hpneo/gmaps@master/gmaps.js"></script>
<div class="container">
  <h1 class="text-2x mb-2" style="font-size: 20px;">
    Mapp
  </h1>

  <h3>How it works ?</h3>

  <!-- insert map -->
  <div id="map"></div>
</div>

【讨论】：

我能够设置它并且我看到了地图，但我仍然收到一个糟糕的错误错误..
此错误在我的控制台中：Uncaught TypeError: Cannot read property 'prototype' of undefined at common.js:71 at Object._.jd (js?key=AIzaSyCZWTTkguiQpNFtckZZ5lpJLvVvMcI:58) at a (common.js:71) at Ap (common.js:71) at common.js:77 at rp.i (common.js:151) at Object.c [as _1era5m] (common.js:69) at QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%3A2004%2F&3sAIzaSyCZWTTkguiQpNFtckZZ5lpJLvVvMc0hsmI&7su8j5qn&10e1&callback=_xdc_._1era5m&key=AIzaSyCZWTTkguiQpNFtckZZ5lpJLvVvMc0hsmI&token=21061:1
如果它在小提琴和代码sn-p中工作，但在您的网站（或本地机器）上失败，那么它可能是密钥的问题。你换钥匙了吗？您的密钥是否与计费帐户关联和/或受到限制？查看错误消息，消息中似乎有多个不同的键。
在我的域上，使用我的密钥it works
在我的域上，使用小提琴中的密钥（Google 的密钥，我的域未启用）it gives the same error you see

【解决方案2】：

我相信示例 Google API KEY 仅限于他的域，我们不能使用它。当我把钥匙换成我的时，代码就起作用了。确保密钥已为您的 API KEY 启用了 gmaps.js 使用的所有 API（我已启用所有以防万一。将更新 KEY 权限以进行部署）

【讨论】：