Бен Кирби, Пейдж Уильямс, Фил Масс и Танви Гарг

Мы учимся в школе кодирования Epicodus в Портленде, штат Орегон.

Мы хотели включить Google Maps в один из наших проектов, используя Webpack, чтобы отточить наши навыки асинхронности. Мы столкнулись с некоторыми проблемами и не смогли найти документацию, показывающую аналогичный вариант использования. Наша простая структура проекта выглядела так:

|- .env
|- .gitignore
|- package.json
|- webpack.config.js
|- src 
   - index.html
   - main.js
   - map.js
   - styles.css

Мы используем dotenv-webpack для защиты нашего ключа API и включаем .env в наш файл .gitignore, чтобы он никогда не передавался в репозиторий. Одностраничный пример Google полезен для понимания базовой структуры объекта Google Maps, но он не предоставляет документации о том, как реализовать его в более сложной структуре приложения webpack.

После попытки реализовать пример Google в нашем приложении webpack, добавив скрипт Google Maps в наш файл map.js, мы получили следующую ошибку:

Нам нужно было найти способ загрузить API Карт Google без глобального обратного вызова в HTML, сохраняя при этом ключи API скрытыми. Наш поиск привел нас к удобному пакету NPM load-google-maps-api.

Реализация

Вот как мы реализовали это в нашем проекте:

Чтобы установить пакет с NPM, запустите:

npm install --save load-google-maps-api

В вашем HTML добавьте div, в котором будет находиться карта.

<div id="map"></div>

Задайте размер карты в файле CSS.

#map {
  width: 500px;
  height: 500px;
}

Требуйте пакет NPM в map.js и напишите функцию для загрузки API Карт Google. Вы предоставляете ключ API как литерал объекта.

const loadGoogleMapsApi = require('load-google-maps-api');
class Map {
  
  static loadGoogleMapsApi() {
    return loadGoogleMapsApi({ key: process.env.GOOGLEMAPS_KEY });
  }
  static createMap(googleMaps, mapElement) {
    return new googleMaps.Map(mapElement, {
      center: { lat: 45.520562, lng: -122.677438 },
      zoom: 14
    });
  }
}
export { Map };

Мы также добавили функцию для создания объекта карты. К чему мы вернемся в следующем фрагменте.

В main.js:

import { Map } from './map';
import './styles.css';
document.addEventListener("DOMContentLoaded", function() {
  let mapElement = document.getElementById('map');
  
  Map.loadGoogleMapsApi().then(function(googleMaps) {
    Map.createMap(googleMaps, mapElement);
  });
});

Вот как это работает! Мы вызываем функцию loadGoogleMapsAPI, которая возвращает обещание. Когда обещание выполняется, он возвращает объект, эквивалентный google.map в документации API карт Google. Вы можете использовать возвращенный объект для вызова функции createMap.

Вот ссылка на репо с минимальной настройкой Google Maps. Чтобы построить это:

  1. Клонировать в локальный каталог
  2. Запустите npm install
  3. Запустите npm run build и проверьте, нет ли ошибок
  4. Запустите npm run start или npm run winstart, если у вас Windows
  5. Он должен открыть вкладку в вашем браузере по адресу localhost: 80

Заключение

Нам понравился этот пакет особенно из-за того, насколько он чистый и насколько просто его можно было реализовать в существующем коде. Кроме того, это позволило нам беспрепятственно использовать остальные функции Google Maps вместе с пакетом.

Удачного кодирования!