Добавление карты Google на сайт

Чтобы найти сервис на сайте или в блоге, можно интегрировать в страницу карту Google и, возможно, добавить на ней указание.

1) Расположение

Откройте веб-сайт Google Maps, на котором отображается карта, подобная изображению справа. Двигайтесь мышью: нажимайте на кнопку и двигайте рукой, чтобы двигаться, двигайте кнопкой, чтобы увеличивать или уменьшать масштаб.

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

Итак, выберите на карте конкретное место, то, где находится сервис или магазин, который вы хотите там разместить. В нашем примере мы находим его в Париже на Елисейских полях.

2) Получить код

Как только область определена с максимально возможным увеличением, нажмите на «Get URL». В диалоговом окне отображаются два поля. Во втором поле HTML-код, а внизу текст: «Настроить и просмотреть встроенную карту».
Щелкните эту ссылку для отображения панели конфигурации.
Затем мы можем восстановить код, выделив его мышью и клавишами и CTRL + V.

<iframe 
width="320" 
height="240" 
frameborder="0" 
scrolling="no" 
marginheight="0" 
marginwidth="0" 
src="http://maps.google.fr/?ie=UTF8&ll=48.867284,2.315369
&spn=0.003098,0.006942&z=17&om=1&layer=c
&output=embed&s=AARTsJqaq7rV0B9cs4JBrvPKbCnu0GGTnA">
</iframe>

3) Добавление направления

Для этого необходимо создать аккаунт Google Maps. Нажмите на вкладку «Мои карты», затем кнопку «Создать карту».

Упростить дело можно также, сделав скриншот карты и добавив к изображению направление с помощью программы для рисования.

4) Используйте код

Извлеченный таким образом код может быть размещен в любом месте на веб-странице.

Демонстрация:


Увеличить карту

Ресурсы

ПО для захвата экрана позволит сделать скриншот карты (например, инструмент Windows Capture или MWSnap).

Пузырь рисуется с помощью инструмента для рисования LibreOffice и вставляется с помощью The Gimp.


Использование элемента карты

С Google Web Elements добавить карту стало проще. Но обслуживание прекращено. Однако приведенный ниже код все еще работает (пока).

Перейдите в раздел Элементы карты. Введите местоположение, свой адрес профессионального веб-сайта и разместите сгенерированный код на своей странице. Например, с «Парижем»:


См. также