Как встроить карты Bing в WordPress

/

Вы хотите встроить Bing Maps на свой сайт WordPress? Если вы ищете альтернативу Google Maps, то Bing Maps - правильный кандидат для вас.

Подобно Google Maps, вы можете использовать Bing Maps для отображения направлений, пробок, маршрутов и инструкций по навигации на вашем сайте WordPress. Поскольку оно принадлежит Microsoft, это отличное картографическое приложение с массой полезных данных.

В этой статье мы покажем вам, как легко встроить Bing Maps в WordPress, шаг за шагом.

Как встроить Bing Maps в WordPress

Добавление Bing Maps в WordPress (плагин не требуется)

Первое, что вам нужно сделать, это зайти на сайт Bing Maps и найти место или карту, которую вы хотите встроить.

Как только вы найдете местоположение, нажмите на опцию «Еще» с трехточечным значком и выберите опцию «Вставить карту».

Встраивать параметр карты в карты Bing

После этого откроется новая вкладка, где вы сможете настроить карту для встраивания на свой веб-сайт.

Настройте карту Bing для встраивания на сайт WordPress

Вы можете выбрать размер карты, тип карты (статическая или перетаскиваемая карта), стиль карты (автомобильная или воздушная) и ссылки на карту. Просмотрите параметры настройки и нажмите «Сгенерировать код».

После этого он предоставит вам фрагмент кода. Скопируйте код, потому что он понадобится вам на следующем шаге.

сгенерированный код встраивания для карт Bing

Теперь вернитесь на свой сайт WordPress и создайте новую страницу или отредактируйте существующую, на которую вы хотите добавить карту.

На экране редактирования страницы щелкните значок «Добавить новый блок» и выберите блок «Пользовательский HTML».

Добавить собственный блок HTML в редактор страниц WordPress

После этого вставьте код внедрения карты Bing, который вы скопировали ранее, в поле HTML.

Код встраивания карты Bing добавлен в редактор WordPress

Теперь вы можете сохранить или опубликовать свою страницу и нажать кнопку предварительного просмотра, чтобы увидеть карту, встроенную в вашу страницу. Вот как Bing Map появилась на нашем демонстрационном сайте.

Карта Bing, встроенная в WordPress - предварительный просмотр вручную

Добавление карт Bing с помощью подключаемого модуля

Если вам нужно встроить только одну карту на свой веб-сайт, то ручной метод, показанный выше, является лучшим вариантом.

Однако, если вы запустите веб-сайт, на котором вам часто нужно добавлять карты, тогда будет проще использовать плагин для добавления карт Bing.

Первым делом вам необходимо установить и активировать плагин Ultimate Maps by Supsystic. Подробные инструкции вы можете найти в нашем пошаговом руководстве по установке плагина WordPress.

Это бесплатный плагин карт WordPress, который позволяет вам встраивать карты Bing, карты Leaflet и другие альтернативы Google Maps в ваш блог WordPress.

Чтобы использовать этот плагин с картами Bing, вам потребуется ключ API карты Bing.

Просто создайте учетную запись на сайте Bing Maps Dev Center. Если у вас уже есть учетная запись Microsoft, вы можете просто войти в систему с учетными данными.

Войдите в Центр разработки Bing

После того, как вы вошли в свою учетную запись, вам нужно нажать на меню «Моя учетная запись» и выбрать опцию «Мои ключи».

Bing Maps Dev Center Опция Мои ключи

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

Создайте ключ API карты Bing для встраивания в WordPress

После этого вы можете увидеть сообщение «Ключ создан успешно» и подробную информацию о ключе в поле.

Ключ API Карт Bing создан

Вы можете просто нажать на ссылку «Копировать ключ» или «Показать ключ» и скопировать ключ Bing Maps API.

После этого вам нужно вставить ключ в настройки вашего плагина.

Посетите Ultimate Maps от Supsystic »Настройки на панели инструментов и выберите« Bing Microsoft »в качестве движка карт. После этого вставьте ключ API, который вы скопировали ранее, в поле ключа API Карт Bing.

Вставьте свой ключ API Bing Maps в настройки плагина Ultimate Maps by Supsystic.

Не забудьте сохранить настройки плагина.

После этого вам нужно добавить категории маркеров, посетив Ultimate Maps от Supsystic »Категории маркеров» Добавить категорию.

Добавить категории маркеров для карт Bing

Создайте столько категорий маркеров, сколько вам нужно.

Затем щелкните меню «Добавить карту», ​​чтобы создать новую карту. Введите название карты, определите ширину и высоту карты, выберите режим панели навигации и т. Д.

Добавить карту Bing с помощью плагина

Вы также можете настроить параметры, чтобы сделать карту перетаскиваемой, использовать двойной щелчок для увеличения и многое другое. Самое главное, введите местоположение, которое будет отображаться в центре карты.

Затем прокрутите вниз и настройте дополнительные параметры ниже. После этого нажмите кнопку «Сохранить карту» под окном предварительного просмотра карты.

После этого вы можете добавить маркеры, чтобы показать основные точки местоположения на вашей карте. Перейдите на вкладку «Маркеры» и добавьте имя создателя.

Добавить новый маркер для карты Bing в WordPress

Вы можете использовать название места или организации в качестве названия маркера.

Например, мы использовали в качестве названия маркера «Университет Флориды», потому что хотим показать на нашей демонстрационной карте одни из лучших колледжей Флориды.

После этого вы можете добавить текст описания маркера, а также изображение.

Прокрутите вниз и выберите значок для вашего нового маркера. Далее вам нужно ввести адрес, чтобы указать маркер. А также выберите категорию маркера.

Сохранить маркер для карт Bing

Просмотрите все остальные параметры и нажмите кнопку «Сохранить маркер».

Вы можете добавить другие маркеры, выполнив те же действия.

По мере добавления маркеров вы можете предварительно просмотреть их в окне предварительного просмотра. Если вы довольны своей картой, перейдите к опции «Шорткод карты» вверху и скопируйте шорткод.

Скопируйте шорткод Bing Map для встраивания в WordPress

После этого создайте новую страницу или отредактируйте существующую, чтобы встроить новую карту Bing.

В редакторе страницы щелкните значок «Добавить новый блок» и выберите блок «Шорткод» в разделе «Виджеты».

Добавить блок шорткода в WordPress

Теперь вам нужно вставить шорткод карты Bing, который вы скопировали ранее.

Вставьте шорткод для вставки карты BIng в редактор страниц WordPress

После этого сохраните или опубликуйте свою страницу и просмотрите, как карта Bing будет выглядеть на вашем веб-сайте.

Вот как на нашем демонстрационном сайте появилась встроенная карта Bing.

Карта Bing, встроенная в WordPress с помощью плагина

Мы надеемся, что эта статья помогла вам узнать, как легко встраивать Bing Maps в WordPress. Вы также можете ознакомиться с нашим руководством о том, как встраивать настоящие твиты в сообщения блога WordPress.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибку безопасного подключения в WordPress

Вы видите в WordPress сообщение «Не удается установить безопасное соединение»? Это распространенная ошибка WordPress, которая обычно возникает, когда

Как удалить панель приветствия в панели управления WordPress

Вы хотите удалить панель приветствия на панели инструментов WordPress? Панель приветствия - это поле, добавленное на страницу панели управления вашей

Как исправить ошибку при установлении соединения с базой данных в WordPress

Вы видите на своем веб-сайте WordPress сообщение «Ошибка при установлении соединения с базой данных»? Это фатальная ошибка, которая делает ваш сайт

Как правильно перейти с Medium на WordPress

Вы хотите перенести свой блог Medium на WordPress? Хотя Medium - достойная платформа для ведения блогов, она, безусловно, не соответствует гибкости WordPress. В