Встраивание карт Google: API или iFrame?

Когда 8 февраля компания Google запустила свой сервис Google Maps^{8 февраля} 2005 года, наверняка даже команда дизайнеров, отвечавшая за его разработку, не могла предположить, насколько их картографический онлайн-сервис навсегда изменит нашу повседневную жизнь. Уже более десяти лет этот веб-сервис предоставляет спутниковые снимки всей планеты, а с появлением мобильных устройств он стал незаменимым помощником. Приложение может вдохновить вас, когда вы находитесь дома: вы можете посмотреть, как далеко находится четырехзвездочный отель от пляжа или популярных ресторанов в этом районе. Но когда вы находитесь на улице, Google Maps становится незаменимым помощником, показывая вам множество различных путей к месту назначения — пешком, на велосипеде, общественном транспорте или автомобиле.

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

Прежде чем создавать собственные выдержки из карт, необходимо создать учетную запись Google — если у вас ее еще нет. После входа в систему откройте приложения Google и запустите картографическую службу, нажав кнопку «Карты».

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

Начните с поиска раздела Google Maps, который вы хотите отобразить на своем сайте, добавьте инструкции по маршрутам или другую информацию, которую вы считаете важной. Когда вы будете довольны своим выбором, вы можете начать интегрировать его в свой веб-сайт. Снова откройте навигационное меню и выберите опцию «Поделиться картой для встраивания». Нажмите на «Встроить», и Google предложит вам HTML-код для вставки вашей карты во всплывающем окне.

Теперь осталось только скопировать этот фрагмент кода в исходный код вашего сайта. Пиксельные данные внутри кода (например, 640 x 480 пикселей) определяют размер участка карты. Поскольку этот компактный HTML-код представляет собой так называемый элемент iFrame, это означает, что содержимое карты будет параллельно загружаться на сервер Google при каждом открытии вашего сайта, поэтому ваш веб-сервер не будет задействован. Эта технология встроенного фрейма поддерживается почти всеми современными браузерами и может использоваться для встраивания элементов социальных сетей.

Интеграция Google Maps с помощью iFrame разрешена только для частного использования. Если вы хотите внедрить картографический сервис на коммерческий сайт, вам придется использовать другой метод интеграции: Встраивание с помощью официального API Google Maps.

Встраивание службы Google Maps в ваш сайт для коммерческого использования немного сложнее: API Google Maps (интерфейсы прикладного программирования) менее просты в использовании, чем технология iFrame. Но и возможностей у него гораздо больше: разработчики, использующие его, получают новые, расширенные возможности для интеграции Google Maps в свои веб-проекты. Примером тому может служить относительно новое дополнение WhatsApp, которое использует API Google Maps, чтобы пользователи могли показать друзьям свое точное местоположение на карте. А веб-сервис Plane Finder, который показывает отправление и прибытие рейсов по всему миру в режиме реального времени, также использует API Google Maps.

Чтобы как следует изучить эти различные API и понять, какой из них лучше всего подходит для вашего веб-проекта, ознакомьтесь с полным списком и некоторыми рекомендациями в Google API Picker.

Работа с API Google Maps не очень подходит для неопытных пользователей, не имеющих специальных знаний в области программирования. Приличное знание JavaScript особенно полезно и выгодно, когда речь идет о встраивании более сложных карт.

1. Как и для встраивания Google Maps с помощью iFrame, вам потребуется учетная запись Google, чтобы воспользоваться преимуществами API Google. Выберите API, который вы хотите использовать, и запросите ключ. В данном примере мы выбрали API JavaScript.

2. Продолжите процесс, нажав на «GET A KEY» в верхней правой части экрана. Теперь перед вами появится всплывающее окно, в котором вас попросят согласиться с условиями и положениями. Введите название проекта в верхней части, затем нажмите «Да», чтобы принять его. Вы сможете продолжить работу, нажав кнопку ‘CREATE AND ENABLE API’ в правом нижнем углу всплывающего окна.

3. После создания ключа API вы можете сразу же использовать его в своем веб-проекте. Чтобы помочь вам определить, какие записи нужно добавить в HTML-документ и куда интегрировать ключ, Google предлагает пошаговое руководство в этом учебнике.

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

Преимущества интеграции картографической службы Google в ваш сайт очевидны: вы предлагаете посетителям сайта самый простой способ найти вас, а веб-сервер Google берет на себя нагрузку, поддерживая работу вашего сайта на полной мощности. В 2012 году Google начал взимать плату за коммерческое использование своего невероятного сервиса определения местоположения. Однако для некоммерческих целей пользователи могут свободно использовать простой инструмент встраивания, доступный на Google Maps: iFrame. Для коммерческого использования Google предлагает API Google Maps — более сложный механизм встраивания, который обеспечивает большую гибкость при создании карт в приложениях и на веб-сайтах. API широко используются компаниями сегодня, но требуют предварительного опыта работы с JavaScript и HTML.