Статические карты против интерактивных

Вкратце Интерактивные круче, дороже, тяжелее. Статические - это просто картинки, но зачастую их более чем достаточно.

В нашем обзоре сервисов для предоставления интерактивных карт есть разделение карт на интерактивные (interactive) и статические (static), а также Google Maps еще предоставляют встроенные (embed) карты - это iframe-окно с картой гугла с дефолтными стилями карты и маркера, помимо этого там есть быстрая ссылка на построение маршрута. Статическая карта - это картинка, во множестве сервисов в примерах использования так и предлагается вставлять их через <img> тег. Интерактивная карта - это карта, с которой возможно пользовательское взаимодействие: приближение, перемещение, клики по маркерам, в общем, основные возможности интерактивных карт, но только на вашем сайте.

Чем статическая карта отличается от простого скриншота

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

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

Некоторые особенности интерактивных карт

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

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

Какую же карту использовать?

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

Небольшая шпаргалка для принятия решения:

Интерактивные
знание джаваскрипта написание и подключение дополнительного кода на фронте дороже, ну или как минимум повышается вероятность, что это станет платным неизвестно, сколько пользователи могут накрутить дополнительных запросов, за которые придется платить	интерактив: zoom, move и т.п. кликабельные маркеры и другие объекты лид остается на сайте: пользователь может больше получить информации от карты, не уходя с вашего сайта

Интерактивные

Затраты

Преимущества

знание джаваскрипта
написание и подключение дополнительного кода на фронте
дороже, ну или как минимум повышается вероятность, что это станет платным
неизвестно, сколько пользователи могут накрутить дополнительных запросов, за которые придется платить

интерактив: zoom, move и т.п.
кликабельные маркеры и другие объекты
лид остается на сайте: пользователь может больше получить информации от карты, не уходя с вашего сайта

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

Интересное наблюдение

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