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

После этого нажмите на значок меню в левом верхнем углу окна, на котором изображены 3 полосы, и выберите пункт «ссылка/код», после этого перейдите во вкладку «код», на ней выделите нужный размер карты в выпадающем меню слева и Вы получите примерно следующий код:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d325518.687803164!2d30.252511957059646!3d50.401699048775406!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4cf4ee15a4505%3A0x764931d2170146fe!2z0JrQuNC10LIsINCj0LrRgNCw0LjQvdCwLCAwMjAwMA!5e0!3m2!1sru!2s!4v1510510499620" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

Чтобы применить этот код на веб-странице, просто скопируйте и вставьте его в свой код HTML.

Обратите внимание, в результате получится неадаптивная карта фиксированной ширины и высоты. Чтобы сделать такую карту адаптивной, удалите атрибуты ширины и высоты из элемента iframe и воспользуйтесь способом, детально описанном в уроке «Создание адаптивного дизайна для встроенных видео с сайтов Youtube и Vimeo».

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

http://maps.google.com/maps/api/staticmap?center=SAIT,AB&zoom=14&size=400x400&sensor=false

Основные параметры, использующиеся в ней, обозначают следующее:

Параметр center (центр) задает или адрес, такой же, как используется для поиска в Google картах, или значения широты и долготы. Параметр zoom  (приближение) — это степень приближения. Параметр size (размер) — это ширина и высота изображения. Значение параметра sensor=false (нет сенсора) подразумевает, что на используемом устройстве нет информации о местоположении: если статическая карта просматривается на смартфоне или другом устройстве, у которого есть информация о местоположении, это значение можно изменить на true (есть сенсор).

Использование ссылки для создания изображения — наиболее простой способ. Просто поместите ссылку в значение параметра src элемента изображения, заменив символ амперсанта & на запись &, чтобы страница не стала недоступной. Например, эта запись:

<img src="http://maps.google.com/maps/api/staticmap?center=SAIT,%20AB &zoom=1 &size=550x485 &maptype=satellite &sensor=false" alt="Map of the world supplied by Google Maps">

создаст изображение карты мира.

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

На сайтах Coveloping и Mapkit есть отличные генераторы Google карт с большим количеством настроек.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание адаптивного дизайна для встроенной Google карты
• Адаптивный дизайн для встроенных видео с сайтов Youtube и Vimeo
• Фоновые изображения для экранов Retina с использованием свойства задания изображения