Хотите встроить Bing Maps на свой сайт WordPress? Если вы ищете альтернативу Google Maps, то Bing Maps – подходящий кандидат для вас.
Подобно Google Maps, вы можете использовать Bing Maps для отображения направлений, трафика, маршрутов и инструкций по навигации на вашем сайте WordPress. Поскольку он принадлежит Microsoft, это отличное картографическое приложение с кучей полезных данных.
В этой статье мы покажем, как легко встраивать Bing Maps в WordPress, шаг за шагом.
^
Добавление карт Bing в WordPress (плагин не требуется)
Первое, что вам нужно сделать, это зайти на сайт Bing Maps и найти местоположение или карту, которую вы хотите вставить.
Найдя местоположение, нажмите «Больше» с трехточечным значком и выберите «Вставить карту».
^
После этого откроется новая вкладка, где вы можете настроить карту для встраивания в ваш сайт.
^
Вы можете выбрать размер карты, тип карты (статическая или перетаскиваемая карта), стиль карты (дорога или антенна) и ссылки на карту. Просмотрите параметры настройки и нажмите «Создать код».
После этого он предоставит вам фрагмент кода. Идите вперед и скопируйте код, потому что он понадобится вам на следующем шаге.
^
Теперь вернитесь на свой сайт WordPress и создайте новую страницу или отредактируйте существующую, где вы хотите добавить карту.
На экране редактирования страницы щелкните значок «Добавить новый блок» и выберите блок «Пользовательский HTML».
^
После этого вставьте код вставки Bing Map, который вы скопировали ранее, в поле HTML.
^
Теперь вы можете сохранить или опубликовать свою страницу и нажать на кнопку предварительного просмотра, чтобы увидеть карту, встроенную в вашу страницу. Вот как появилась карта Bing на нашем демо-сайте.
^
Добавление карт Bing с помощью плагина
Если вам нужно встроить только одну карту на свой веб-сайт, лучше использовать ручной метод, показанный выше.
Однако, если вы запускаете веб-сайт, на котором вам часто нужно добавлять карты, использование плагина для добавления карт Bing будет проще.
Первое, что вам нужно сделать, это установить и активировать плагин Ultimate Maps by Supsystic. Для получения подробных инструкций вы можете ознакомиться с нашим пошаговым руководством по установке плагина WordPress.
Это бесплатный плагин для карт WordPress, позволяющий вставлять карты Bing, листовки и другие альтернативы Google Maps в ваш блог WordPress.
Чтобы использовать этот плагин с картами Bing, вам потребуется ключ API Bing Map.
Просто создайте учетную запись на веб-сайте Bing Maps Dev Center. Если у вас уже есть учетная запись Microsoft, вы можете просто войти в систему, используя свои учетные данные.
^
После того как вы вошли в свою учетную запись, вам нужно нажать на меню «Моя учетная запись» и выбрать «Мои ключи».
^
На следующем экране вам необходимо заполнить информацию о вашем сайте, чтобы создать ключ.
^
После этого вы можете увидеть сообщение «Ключ успешно создан» и сведения о ключе в поле.
^
Вы можете просто щелкнуть ссылку «Копировать ключ» или «Показать ключ» и скопировать ключ API Карт Bing.
После этого вам нужно вставить ключ в настройках вашего плагина.
Посетите Ultimate Maps от Supsystic »Настройки на панели инструментов и выберите« Bing Microsoft »в качестве движка карт. После этого вставьте скопированный ранее ключ API в поле ключа API Карт Bing.
^
Не забудьте сохранить настройки вашего плагина.
После этого вам нужно добавить категории маркеров, посетив Ultimate Maps от Supsystic »Категории маркеров» Добавить категорию.
^
Создайте столько категорий маркеров, сколько вам нужно.
Затем нажмите на меню «Добавить карту», чтобы создать новую карту. Введите имя для вашей карты, определите ширину и высоту карты, выберите режим панели навигации и т. д.
^
Вы также можете настроить параметры, чтобы сделать карту перетаскиваемой, использовать двойной щелчок для увеличения и многое другое. Самое главное, введите местоположение для отображения в центре карты.
Далее прокрутите вниз и настройте дополнительные параметры ниже. После этого нажмите кнопку «Сохранить карту» под окном предварительного просмотра карты.
После этого вы можете добавить маркеры, чтобы показать основные точки расположения на вашей карте. Нажмите на вкладку «Маркеры», а затем добавьте имя для вашего производителя.
^
Вы можете использовать название места или организации в качестве имени маркера.
Например, мы использовали «Университет Флориды» в качестве названия маркера, потому что мы хотим показать некоторые из лучших колледжей во Флориде на нашей демо-карте.
После этого вы можете добавить текст описания маркера, а также изображение.
Прокрутите вниз и выберите значок для вашего нового маркера. Далее необходимо ввести адрес, чтобы указать маркер. И также выберите категорию маркера.
^
Просмотрите все остальные параметры и нажмите кнопку «Сохранить маркер».
Вы можете добавить больше маркеров, выполнив те же действия.
Когда вы добавляете маркеры, вы можете просматривать их в реальном времени в окне предварительного просмотра. Если вы довольны своей картой, перейдите к опции «Короткий код карты» вверху и скопируйте короткий код.
^
После этого создайте новую страницу или отредактируйте существующую, чтобы встроить новую карту Bing.
В редакторе страниц щелкните значок «Добавить новый блок» и выберите блок «Шорткод» в разделе «Виджеты».
^
Теперь вам нужно вставить короткий код карты Bing, который вы скопировали ранее.
^
После этого сохраните или опубликуйте свою страницу и просмотрите, как выглядит карта Bing на вашем веб-сайте.
Вот как появилась встроенная карта Bing на нашем демонстрационном сайте.
^
Мы надеемся, что эта статья помогла вам научиться легко встраивать Bing Maps в WordPress. Возможно, вы также захотите ознакомиться с нашим руководством о том, как вставлять фактические твиты в сообщения блога WordPress.
