Как вставить карту на сайт

Довольно часто при создании сайта возникает необходимость вставить на него карту, которая бы указывала местоположение Вашей организации. На самом деле, карта на сайте, это очень удобно: в первую очередь для Ваших пользователей. Они смогут сразу, не покидая Вашего ресурса, увидеть: как можно Вас найти, что находится поблизости и определить насколько далеко расположена Ваша организация от их местоположения. Не все знают, как вставить карту на сайт. А сделать это очень и очень просто!

В этой статье я расскажу и покажу Вам, как, буквально за несколько минут, Вы можете вставить карту с нужным местоположением на страницы Вашего сайта.

Как вставить карту на сайт

Итак, для вставки карты на сайт мы будем использовать сервис от Google.

1. Первое, что нам нужно сделать, это перейти на сайт Google-карты .

После перехода по данной ссылке, Вы увидите следующее.

сервис Google maps

2. Сейчас, чтобы произвести все необходимые нам операции, нам лучше всего перейти к «Классическому интерфейсу».

Для того, чтобы это сделать, нажмите на иконку вопросительного знака в правом нижнем углу экрана.

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

выбор классического интерфейса в картах Google

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

размещаем карту на страницах сайта

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

классический интерфейс Google-карт

3. Теперь в поле для ввода адреса введите необходимый адрес. Не забудьте, что нужно указать страну, город, улицу и дом, то есть полный адрес.

определяем местоположение на карте

Как результат, Вы получите Ваше местоположение на карте, отмеченное красным маркером.

4. Теперь нам нужно получить код для вставки в нашу веб страницу, а также задать некоторые настройки.

Для того чтобы получить код вставки нам нужно нажать на иконку для получения ссылки или кода (она находится правее иконки с принтером).

получаем код для вставки карты на сайт

5. Здесь нас интересует HTML-код для добавления на веб сайт (второе поле).

Также в этом коде Вы можете увидеть некоторые параметры, которые можно изменить. Это размеры карты, то есть ее высота и ширина. Также вы можете задать для карты рамку. По умолчанию значение рамки равно нулю, но Вы можете это изменить, поставив, например, единицу.

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

6. Теперь осталось лишь вставить скопированный код в то место Вашей веб страницы, где Вы хотите видеть карту.

Вы можете создать отдельный блок «div» специально для Вашей карты, который Вы в дальнейшем сможете стилизовать через файл таблицы стилей.

Я вставлю мою карту прямо здесь. Смотрите, как она будет выглядеть.


Просмотреть увеличенную карту

В итоге, пользователь увидит Ваше местоположение, отмеченное маркером. Он сможет передвигать карту, увеличивать и уменьшать ее масштаб.

Также над маркером будет выведено окошко с Вашим адресом. А внизу будет ссылка для просмотра карты в увеличенном масштабе.

Вот так, все очень просто, функционально и удобно.

Пользуйтесь на здоровье!

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

Также подписывайтесь на обновление блога, если Вы еще не подписаны. Обещаю Вам много полезных материалов.

С Вами была Анна Котельникова.

Успехов Вам и до новых встреч.



Что выбрать CMS или самописный движок?

Линейные градиенты с CSS3

Создай свою интерактивную фото галерею

Понравилась статья? Поделись с друзьями!


Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): jrrey2k
Дата: 2014-05-18

esto mismo se puede llevar a una aplicacion ?

Комментарий добавил(а): Олеся
Дата: 2014-05-18

Большое спасибо! Буквально пару дней назад пыталась вставить карту на сайт, но пользовалась старыми инструкциями, а интерфейс карт Google изменился. Ничего не поняла: где брать код для вставки и т.д. А сейчас от Вас узнала, что можно перейти к классическому интерфейсу и быстро вставить карту. Спасибо, нужная информация вовремя!

Комментарий добавил(а): Админ
Дата: 2014-05-19

Пожалуйста. Новый интерфейс - это пожалуй главная проблема при вставке. Не все знают как перейти к классическому. Спасибо за отзыв

Комментарий добавил(а): Вероника
Дата: 2015-02-04

Огромное спасибо, все очень доступно. У меня получилось))

Комментарий добавил(а): Анастасия
Дата: 2015-04-03

Спасибо!!!! Все очень доступно! Наконец-то нашла что искала!

Комментарий добавил(а): Марина
Дата: 2017-01-16

Низкий поклон, Вам.

Комментарий добавил(а): Макс
Дата: 2017-06-12

Доброго времени суток, спасибо большое, правда я нашел эту статью аж в 17 году, но будем пытаться спроектировать на мой сайт) p.s. Пожалуйста, если хоть кто-то читает, то свяжитесь со мною (админы)! kpblm1234@gmail.com

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: