Бен Кирби, Пейдж Уильямс, Фил Масс и Танви Гарг
Мы учимся в школе кодирования 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. Чтобы построить это:
- Клонировать в локальный каталог
- Запустите npm install
- Запустите npm run build и проверьте, нет ли ошибок
- Запустите npm run start или npm run winstart, если у вас Windows
- Он должен открыть вкладку в вашем браузере по адресу localhost: 80
Заключение
Нам понравился этот пакет особенно из-за того, насколько он чистый и насколько просто его можно было реализовать в существующем коде. Кроме того, это позволило нам беспрепятственно использовать остальные функции Google Maps вместе с пакетом.
Удачного кодирования!