Как встроить карту Google на статический сайт

Карты Google нельзя использовать бесплатно; цена зависит от количества раз, когда пользователи загружают карту на веб-сайт. Однако хорошей новостью является то, что Google предоставляет бесплатный ежемесячный кредит в размере 200 долларов; этого достаточно для 28 000 загрузок динамической карты в месяц, чего должно быть более чем достаточно для большинства небольших сайтов.

Функциональность карты, включенная в некоторые наши темы для ресторана Cortado, использует JavaScript API Google Maps, поэтому, прежде чем вы сможете включить ее на своем сайте, вам нужно будет получить ключ API и ввести его в настройки темы в Publii. Этот ключ можно сгенерировать с помощью консоли Google Cloud Platform, которая управляет различными функциями Google, которые разработчики могут захотеть использовать на своем сайте.

Чтобы получить ключ API, выполните следующие действия:

1. Посетите консоль облачной платформы Google; если вы уже вошли в свою учетную запись, вы увидите экран проекта. В противном случае войдите в систему или создайте новую учетную запись, чтобы получить доступ.
2. Нажмите в меню проекта, затем нажмите кнопку "Новый проект". Если у вас уже есть проект, к которому вы хотите подключить API, вы можете нажать на него вместо этого.
3. На экране "Новый проект" введите название проекта. Вы можете использовать любое название по своему усмотрению; это исключительно для вашего личного использования. Параметр "Местоположение" можно оставить пустым, если он не нужен. Нажмите на кнопку "Создать", когда будете готовы.
4. После создания проекта нам теперь нужно сгенерировать наш ключ API. Откройте меню навигации, нажав на значок меню в левом верхнем углу страницы, затем выберите API и сервисы → Учетные данные.
5. На странице учетных данных будет единственная кнопка; "Создать учетные данные". Нажмите на нее, чтобы открыть раскрывающееся меню, затем нажмите "Ключ API".
6. Откроется всплывающее окно с вашим недавно созданным ключом API, а также двумя вариантами; "Закрыть" и "Ограничить ключ". Нажмите на опцию "Ограничить ключ".
7. Ограничивая ключ, мы можем быть уверены, что функциональность вашей карты доступна только на вашем веб-сайте. На странице ключа API в разделе "Ограничения приложения" выберите "HTTP-рефереры (веб-сайты)". Появится новый подраздел под названием Ограничения веб-сайта.
8. В этом разделе вам нужно будет добавить URL вашего сайта в список "разрешенных" сайтов, чтобы он мог отправлять запросы из Google Maps API. Нажмите на кнопку "Добавить элемент"; в появившемся поле "Ссылка" введите URL вашего веб-сайта. Вы можете разрешить всем страницам вашего сайта доступ к map API, добавив звездочку после домена, например, www.example.com / *.
9. При желании вы можете ограничить ее доступ к определенной странице вашего сайта, добавив точный URL, например, www.example.com/mappage. Если у вас несколько сайтов, которые будут использовать API, вы можете продолжить добавлять дополнительные элементы с помощью кнопки "Добавить элемент".
10. После того, как вы добавите все адреса своего сайта, нажмите на кнопку "Сохранить".

Теперь You're key готов к использованию, поэтому мы можем перейти к добавлению его в Publii.

Убедитесь, что вы установили ограничения для приложений и ссылок, как описано выше; это не позволит ключу API работать на других веб-сайтах и блокирует доступ других пользователей к вашей учетной записи, что приведет к расходованию вашего бесплатного кредита и потенциально повлечет за собой дополнительные расходы.

Чтобы добавить ключ к настройкам вашего сайта, откройте Publii и нажмите на опцию "Настройки темы" на левой боковой панели. В разделе "Карта Google", прямо под кнопкой "Вкл. / Выкл.", находится поле "Ключ API"; скопируйте и вставьте сюда свой ключ API и сохраните изменения.

Настройка широты и долготы

Широта и долгота, доступные в настройках темы, определяют, на какую точку мира будет указывать ваша карта при загрузке, а также помещают маркер в точное указанное вами местоположение. По сути, широта и долгота являются привязками к сетке; карта мира разделена на сетку с использованием горизонтальных и вертикальных линий, идущих от произвольной центральной точки (экватор для горизонтальной линии и Гринвич в Лондоне для вертикальной линии, так что центральная точка находится примерно в 350 милях к югу от Ганы, в Африке). Затем широта и долгота сообщают нам, как далеко что-либо находится от этой центральной точки.

Используя Карты Google, вы можете найти широту и долготу местоположения, на которое вы хотите указать на своей карте, и добавить его в Publii. Для этого выполните следующие действия:

1. Откройте Карты Google на своем компьютере. Найдите место, где вы хотите разместить маркер, и щелкните по нему правой кнопкой мыши, чтобы вызвать контекстное меню.
2. В списке опций выберите "Что здесь?" 

   

3. В нижней части экрана появится карта с указанием местоположения, широты и долготы, разделенных запятой, например, 40.681626, -73.993047 (первая широта, вторая долгота). 

   

4. Скопируйте широту и долготу в настройки темы Publii и сохраните изменения.

Если вы предпочитаете использовать приложение Google Maps на своем телефоне или планшете, вы можете получить широту и долготу, долго нажимая на местоположение, в котором вы хотите разместить маркер; широта и долгота маркера будут отображаться в строке поиска.

Дополнительные опции

Единственные необходимые параметры для корректной работы карты в теме Cortado - это ключ API, а также широта и долгота. Однако Publii включает в себя несколько дополнительных настроек, которые можно настроить в зависимости от функциональности, к которой вы хотите, чтобы посетители вашего сайта имели доступ. Все эти параметры отображаются на вкладке Настроек темы в Publii.

• Начальный уровень масштабирования - определяет, насколько увеличенной будет карта при загрузке. Чем меньше число, тем дальше будет карта; таким образом, минимальный уровень масштабирования в основном покажет всю карту мира, в то время как максимальный покажет только ваше местоположение и ближайшие окрестности. Большинству пользователей будет достаточно значения по умолчанию, но при необходимости вы можете настроить его с помощью этой опции.
• Масштабирование и панорамирование - определяет, как пользователи могут взаимодействовать с картой на вашем сайте. Greedy означает, что карту можно прокручивать, проводя по ней одним пальцем или перетаскивая мышью. Cooperative позволяет пользователям прокручивать страницу одним пальцем или карту двумя пальцами (или удерживая клавишу-модификатор, такую как Control на рабочем столе). None запрещает любое управление взаимодействием с картой.
• Управление типом карты - Если включено, пользователи могут переключаться между типами карт, например, спутниковых, дорог и т.д., Используя опцию в левом верхнем углу карты.
• Полноэкранное управление - Если включено, у пользователей будет возможность отображать карту в полноэкранном режиме.
• Управление масштабированием - Если включено, будут отображаться кнопки для изменения уровня масштабирования карты.
• POIs - Если включено, на карте будут отображаться достопримечательности, такие как местные предприятия.
• Дороги - Если включено, на карте будут отображаться все дороги.
• Станция - Если эта функция включена, на карте будут отображаться станции поездов, автобусов и других линий общественного транспорта.