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

2 min


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

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

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

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

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

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

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

Вставить опцию карты в Bing Maps

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Войдите в Bing Dev Center

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставить BIng Map Embed Shortcode в редакторе страниц WordPress

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

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

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

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас на щебет и фейсбук.

Пост Как встроить Bing Maps в WordPress впервые появился на WPBeginner.


0 Comments

Добавить комментарий