Как вставить карту на сайт HTML, как сделать это просто по шагам

Сегодня мы покажем как вставить карту на сайт HTML. Это довольно простая процедура, однако при отсутствии знаний в HTML покажется очень трудной и непонятной. В установке карт на сайте заинтересованы все:

1. Разработчики карт. Каждая установка карты на личном сайте делает более популярным ресурс, с которого взята карта. Так или иначе, но пользователь вашего сайта будет видеть откуда она взята: Яндекс, Google, 2ГИС или еще откуда-то. Так как разработчики карт заинтересованы, чтобы их продуктом пользовались, они предлагают удобное размещение своих карт на сайтах.

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

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

Как вставить карту в HTML?

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

У нас есть 3 основных источника карт, которые дают возможность размещать их карты на сайте. Это:

• Яндекс.Карты;

• Google Maps;

• 2ГИС.

Первое, что нужно уяснить — в какое именно место на сайте вы хотите добавить карту, а только потом идти за кодом к источнику карты. К примеру, если ваш сайт сделан на какой-либо популярной CMS, а вы вообще не дружите с кодом, тогда вам нужно будет воспользоваться виджетом HTML-кода. Соответственно, вы сможете разместить карту лишь в том месте, где можно разместить виджет:

• в сайдбаре;

• на старнице;

• внутри записи;

• в хедере или футере.

Если вы немного понимаете HTML и не боитесь «кодить», тогда вы сможете вставить карту в любом месте в HTML-коде.

Если у вас сайт на чистом HTML, тогда хорошим тоном считается формирование отдельного контейнера для карты с собственным классом или идентификатором. Это нужно для того, чтобы в дальнейшем вы могли стилизовать фрейм карты с помощью CSS. Фактически, размеры карты вы сможете задать в самом HTML-коде, который получите из источника, но для того чтобы лучше стилизовать фрейм, вам понадобится знание CSS.

Как добавить Яндекс.Карту на сайт?

Яндекс позволяет достаточно легко вставить карту в  HTML. Этот ресурс предлагает добавить карту в двух вариантах:

1. Вы можете добавить карту на сайт с уже существующей меткой. То есть это может быть не обязательно метка вашего офиса или магазина. Вы можете найти на карте метку любой организации и установить ее на свой сайт.

2. Вы можете вставить карту на свой  HTML-сайт, создав собственную метку. Может так случиться, что вашей компании пока нет на Яндекс.Карте. Тогда вы создаете собственную метку с  нужным вам адресом  в «Конструкторе» и добавляете эту метку вместе с картой на свой сайт.

Чтобы вставить Яндекс.Карту в  HTML, нужно:

1. Зайти на Яндекс.Карты.

2. Найдите нужный адрес или метку, либо создайте собственную.

3. Вверху справа будет иконка «три точки». Нажмите на нее и найдите пункт «Поделиться».

4. Выберите виджет с картой, скопируйте код и вставьте его в свой  HTML-сайт.

Яндекс.Карты хороши тем, что, если вы используете «Конструктор», тогда вы можете добавить несколько адресов. Например, у вас несколько офисов в одном городе. Вы также можете цветными линиями обозначить маршрут к вашим филиалам, добавить иконки и др.

Яндекс.Карты бывают:

• статическими — это карты «как изображение»;

• интерактивными — это карты, которые можно «приближать и удалять».

Лучше добавлять интерактивные карты.

Как добавить Гугл Карту на сайт  HTML?

Гугл Карты, как и Яндекс.Карты, доступны в двух вариантах:

• с уже готовой меткой;

• с меткой, которую вы создадите самостоятельно.

Чтобы добавить Гугл Карту в  HTML, нужно:

1. Зайти на сервис Google Maps.

2. Найти готовую или создать собственную метку на карте.

3. Найти иконку с «тремя точками» и там отыскать пункт «Поделиться».

4. Вам откроется небольшое меню, где нужно выбрать пункт «Встраивание карт». Там вы можете выбрать подготовленные размеры или задать собственные.

5. После этого нужно скопировать  HTML-код и вставить его на свой сайт в то место, где должна быть размещена карта.

Как вставить 2ГИС-карту в  HTML?

2ГИС, как и предыдущие два сервиса, предлагает 2 варианта выбора карт: 

• с готовой меткой;

• с собственной меткой.

Для того чтобы вставить 2ГИС-карту на сайт, нужно:

1. Открыть 2ГИС.

2. Отыскать компанию или метку, либо создать собственную метку.

3. Определить размеры будущей карты;

4. Принять лицензионное соглашение и нажать на кнопку «Получить код».

5. Скопировать полученный код и вставить его в собственный сайт.

Заключение

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