Главная Новости и статьи Сервисы Google Google-карта на сайте - это легко

Google-карта на сайте - это легко

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

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

Данный сервис пользователь найдет по следующей ссылке: https://maps.google.com/ . Оказавшись на домашней странице, мы увидем карту мира:

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

После того, как мы нашли нужное место, можно переключиться в режим карты со спутника. Иногда этот режим более удобен для поиска необходимой точки. Возьмем к примеру адрес DF-Studio. Находим место и ставим метку. Для этого нажимаем кнопку «Мои метки» под логотипом Google в левом верхнем углу.

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

После этого, GoogleMaps предложит заполнит специальную форму, где в поле «Название» мы указываем имя метки (в данном случае название нашей студии), а в поле «Описание» - краткое описание, на котором устанавливается метка. После заполнения формы с описанием, нажимаем на кнопку «Метка на карте», установив ее в нужном месте и дав ей описание.

Нажимаем «ОК» и двигаемся дальше.

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

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

Для того, чтобы сделать страницу с картой Google на своем сайте еще привлекательней, можно добавить дополнительный вид окрестности через веб-камеру (функция просмотра панорамы в GoogleMaps).

В левом верхнем углу самой карты находим значок жёлтого человечка (которого, кстати, зовут Pegman). Функция просмотра панорамы улиц активируется перетаскиванием человечка на желаемое место на карте. Сделав мышкой пару движений, перед нами появиться сетка из синих линий по всей карте. Данная сетка показывает места, где фотосъёмка панорамы улиц уже проводилась и где мы можем воспользоваться функцией "Просмотр Улиц" (в английском варианте "StreetView").

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

По обе стороны от него есть стрелочки: верхняя разворачивает на пол экрана карту, нижняя – сворачивает ее и показывает только панораму. В нашем случае, нажимаем на верхнюю и смотрим, что получается.

Увидев два варианта вида запрашиваемой местности, проделываем операцию по получению ссылки (или HTML-кода). Настраиваем необходимые параметры отображения и вставляем код на веб-сайт. Вот и все. В результате, мы имеем красивую Google-карту на нашем сайте, которая поможет клиентам и пользователям быстрее найти офис компании.