Как легко добавить карту на свой сайт для пользователей CMS

Мы рассмотрим, как легко создать плагин карт, который позволит пользователям добавлять карты на свой веб-сайт.

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

Владельцам небольших розничных магазинов, таких как пиццерии, кафе и другие физические магазины, необходимо добавлять и обновлять информацию о картах. Это может быть открытие нового места, изменение графика работы или закрытие на праздники. В идеале они не хотят звонить своему разработчику каждый раз, когда им нужна небольшая корректировка. Что им нужно, так это простой в использовании инструмент сопоставления в их системе управления контентом (CMS), такой как Wordpress, Joomla или Drupal.

Пользователи CMS не должны уклоняться от запроса функций сопоставления, которые нужны их веб-сайту. TomTom Maps SDK позволяет быстро и легко добавлять карты на веб-сайт на основе CMS, используя всего несколько строк кода JavaScript.

В этой статье мы рассмотрим, как легко создать плагин для карт, который позволяет пользователям добавлять карты на свой веб-сайт, с настраиваемой административной страницей, где предприятия могут легко добавлять информацию о магазине. Плагин автоматически внедряет код сопоставления JavaScript в WordPress или другую CMS.

СОХРАНЕНИЕ ДАННЫХ НАСТРОЙКИ КАРТЫ

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

TomTom Maps SDK позволяет нам создать плагин с возможностью отображения несколько карт одновременно. Вы можете использовать tt.plugins.Minimap, чтобы добавить функциональность миникарты к своим картам, например, разместить маленькую рамку или другую фигуру на карте большего размера. Например, миникарта может отображать такие детали, как улица, на которой расположен магазин.

СОХРАНЕНИЕ ДАННЫХ О МЕСТОПОЛОЖЕНИИ

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

TomTom Search API обеспечивает геокодирование. Это преобразует текстовый поиск в координаты широты и долготы. Он использует нечеткий поиск и автозаполнение по умолчанию, чтобы помочь найти адреса, даже если поисковый запрос написан с ошибкой или опечатан. Это важно, так как многие города имеют одинаковые названия пригородов или улиц. Автозаполнение позволяет пользователям выполнять более осмысленные вызовы API поиска, распознавая объекты во входном запросе, например слова, написанные наполовину, и предлагая их в качестве условий запроса.

TomTom Fuzzy Search API создает первоначальный поиск. Он передает это ключу API TomTom, который получает запрос, запускает поиск и передает его обратному вызову по завершении.

tt.plugins.SearchBox добавляет на ваши карты полезную функцию поиска. Когда пользователь начинает вводить текст, результаты поиска появляются в списке под полем ввода. Список результатов сочетает в себе результаты автозаполнения и нечеткого поиска.

ВНЕДРЕНИЕ КАРТЫ

Когда вы зарегистрируете учетную запись разработчика в TomTom, вы получите доступ к TomTom Map Display API и комплекту разработчика программного обеспечения (SDK). Вы также получаете ключ доступа к API. Мы можем бесплатно создать наш картографический плагин с 2500 картографическими транзакциями в день.

Мы можем легко создать плагин WordPress для добавления карт TomTom на любой веб-сайт на основе WordPress. Учебник из четырех частей предлагает подробные инструкции о том, как это сделать. Хотя Maps SDK for Web не является прямым плагином или расширением, он упрощает разработку карт для различных веб-приложений CMS, таких как Joomla, Orchard и Drupal, с использованием шорткодов.

ЗАГРУЗКА ДАННЫХ

Чтобы создать карту, которую может редактировать конечный пользователь, нам нужно несколько точек данных. Нам нужно знать желаемый диапазон масштабирования для карты и желаемый стиль. Здесь необходимы такие данные, как адрес предприятия (включая номер улицы, улицу, пригород, штат и страну), а также долгота и широта местоположения.

На интерактивной карте должен быть установлен маркер, чтобы помочь конечному пользователю проложить маршрут от своего местоположения до витрины. Наш плагин может изначально записывать эти данные на JavaScript, а затем переводить их в JSON для использования в веб-приложении.

ДОБАВЛЕНИЕ КАРТЫ

Добавить карту можно так же просто, как использовать базовый HTML-документ, такой как TomTom Maps SDK для Интернета, и несколько строк кода JavaScript. В большинстве CMS плагин или надстройка, которую создает разработчик, могут автоматически внедрять этот код.

Нам также нужны координаты местоположения бизнеса, чтобы добавить код для создания маркера каждого местоположения. Наш плагин умеет находить координаты с помощью нечеткого поиска в TomTom Search API. Мы можем изготовить маркеры разных размеров, цветов, форм и дизайнов. Они могут, например, разграничивать различные магазины или обозначать магазины, предназначенные только для розничной торговли, а не только для торговых продавцов.

Вы можете добавить обратный вызов, чтобы, когда покупатель нажимал на маркер, на странице или во всплывающем окне появлялась дополнительная информация о местоположении. Всплывающее окно фактически является элементом HTML. Рекомендуемые сведения могут включать краткое описание бизнеса, часы работы и контактную информацию. Например, для строительного бизнеса это может также включать информацию о погрузочной площадке или высоте подземной автостоянки. Пользователь CMS должен иметь возможность легко удалять или редактировать эти данные.

API расширенного поиска также может включать такие детали, как точки интереса (POI). К ним относятся ряд опций, таких как рейтинги, ценовой диапазон и обзоры. Это также включает возможность для фотографий (удостоверений личности с фотографией), таких как изображения витрины, внутреннего двора или обеденной зоны ресторана на открытом воздухе. В настоящее время конечная точка Фотографии точек интереса возвращает до пяти фотографий каждой точки интереса. API расширенного поиска использует идентификаторы фотографий из конечной точки сведений о достопримечательностях.

СЛЕДУЮЩИЕ ШАГИ

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

В этой статье мы рассмотрели, как легко создать плагин для владельцев малого бизнеса, чтобы добавлять карты на свой веб-сайт с помощью CMS. Административная страница помогает бизнес-пользователю добавлять и изменять информацию о расположении их магазинов.

Пакеты TomTom SDK содержат все инструменты и информацию, необходимые для создания эффективных картографических приложений для конечных пользователей, включая библиотеки, документацию, примеры кода, процессы и руководства. Даже если вы новичок в создании карт, существует множество примеров использования и учебных пособий, которые помогут расширить ваши знания и опыт. Посетите Портал разработчиков TomTom, чтобы получить бесплатный ключ API и начать создавать карты уже сегодня.

Эта статья изначально была опубликована на странице https://developer.tomtom.com/blog.