Как добавить и настроить интерактивную карту на сайте в Wordpress?

Для реализации интерактивной карты на вашем сайте в Wordpress можно использовать Google Maps API. Вам потребуется создать API-ключ в консоли разработчика Google и подключить его на вашем сайте. Затем вы можете использовать JavaScript-код для инициализации карты и добавления маркеров. Ваш код выглядит правильным, но вам нужно настроить его под нужды вашего сайта.

Вот как вы можете использовать код для создания интерактивной карты:

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

<script>
function initMap() {
  // Создаем элемент карты
  var mapDiv = document.getElementById('map');
  // Устанавливаем начальные координаты и масштаб
  var map = new google.maps.Map(mapDiv, {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
  
  // Добавляем маркер
  var marker = new google.maps.Marker({
    position: {lat: -34.397, lng: 150.644},
    map: map,
    title: 'Hello World!'
  });
}

// Вызываем функцию инициализации карты
initMap();
</script>

Обратите внимание, что у вас должна быть включена библиотека Google Maps JavaScript API. Вы можете добавить следующий скрипт на вашу страницу перед вызовом initMap():

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Замените YOUR_API_KEY на ваш собственный API-ключ, который вы получили в консоли разработчика Google.

Чтобы добавить дополнительные маркеры на карту, вам нужно повторить код создания маркера для каждого маркера, указав соответствующие координаты и заголовок.

Надеюсь, это поможет вам настроить интерактивную карту на вашем сайте в Wordpress. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их. Удачи!

Для добавления и настройки интерактивной карты на своем сайте WordPress, вы можете использовать плагин "WP Google Maps". Этот плагин позволяет легко создавать карты с маркерами и настраивать их поведение при клике.

Вот шаги, которые вы можете выполнить, чтобы добавить интерактивную карту на свой сайт:

1. Установите и активируйте плагин "WP Google Maps" через раздел "Плагины" в административной панели WordPress.
2. В административной панели WordPress найдите и выберите раздел "Карты".
3. Нажмите на кнопку "Добавить новую карту".
4. Введите желаемое название карты и настройте параметры по своему усмотрению, такие как центр карты и масштаб.
5. Нажмите на кнопку "Добавить маркер" и выберите место на карте, где вы хотите разместить маркер.
6. Настройте маркер, добавив информацию о месте, которую вы хотите показать при клике на него.
7. Повторите шаги 5 и 6 для всех маркеров, которые вы хотите добавить на карту.
8. Когда вы закончите, сохраните карту.

После завершения настройки карты, вы можете добавить ее на вашу страницу или запись, используя шорткод [wpgmza id="id_карты"], где "id_карты" - это идентификатор вашей карты.

Относительно вашего предоставленного кода, он использует Google Maps API для создания карты и добавления маркера. Чтобы его правильно использовать, вам нужно:

1. Включить Google Maps API на вашем сайте. Вы можете получить API-ключ на сайте разработчика Google.
2. Вставить ваш API-ключ в код, заменив `YOUR_API_KEY` на ваш реальный ключ.
3. Создать контейнер `
   ` с идентификатором `map` на вашей странице, где должна отображаться карта.
4. Удалить все строки кода, связанные с маркером, если вы собираетесь использовать плагин "WP Google Maps".
5. Вставить этот код в файл `functions.php` вашей темы WordPress или использовать плагин, который позволяет вставлять JavaScript-код на вашу страницу.
6. При необходимости настроить параметры центра и масштаба карты в соответствии с вашими потребностями.

Вот как выглядит ваш код, адаптированный для использования с плагином "WP Google Maps":

function initMap() {
  var mapDiv = document.getElementById('map');
  
  var map = new google.maps.Map(mapDiv, {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

// Удалите код, связанный с маркером, если вы используете плагин "WP Google Maps"

Надеюсь, эта информация поможет вам реализовать интерактивную карту на вашем сайте WordPress!

Удачи!