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

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

Из этой статьи вы узнаете:

Как встроить Bing Maps в WordPress без плагина

Как встроить Bing Maps в WordPress с плагином

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

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

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

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

Теперь идем на свой сайт и создаем новую страницу или редактируем существующую, где вы хотите добавить карту. На экране редактирования страницы щелкните на значок «Добавить новый блок» и выберите блок «HTML код».

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

Теперь вы можете сохранить или опубликовать свою страницу. Вот что у нас получилось.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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