Как настроить gmaps.js в базовом html-скелете - PullRequest
Новая
       42

Как настроить gmaps.js в базовом html-скелете

0 голосов
/ 17 октября 2019

каждый

У меня возникли проблемы с настройкой gmaps в небольшом проекте.

Обратите внимание, что ключи 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, у меня появляется сообщение об ошибке:

Карты GoogleAPI требуется. Пожалуйста, зарегистрируйте следующую библиотеку JavaScript https://maps.googleapis.com/maps/api/js.

1 Ответ

1 голос
/ 17 октября 2019

Проблемы:

  • В опубликованном HTML есть опечатка (отсутствует закрывающий </div> для <div class="container">).
  • CSS не будет работать для определения размера в процентах, ему нужно определить размер содержащего элемента (это можно сделать, определив html, body { height: 100%; }, см. Связанный вопрос: Отзывчивые Карты Google v3 - Невозможнополучить 100% высоты

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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>
...