Как сделать свою карту в гугл мапс


Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс



Здравствуйте, сегодня займемся добавлением Google карт сайт (данный метод подойдет как для вставки карты на обычный сайт, так и на WordPress). Так же вас может заинтересовать .

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

Google карта

Добавить Гугл карты на WordPress сайт можно несколькими способами: с помощью плагинов и просто вставкой кода на сайт. При чем,  любой из вариантов установки карты будет достаточно прост для новичка.

Рассмотрим для начала установку Google карт на свой сайт без использования плагинов.

Как разместить Google карту на сайт без плагина

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

Первым делом, что необходимо сделать - это зайти на страничку сервиса Google maps:

И задать интересующий адрес в поиске:

Добавить Google карту на сайт

Далее необходимо зайти в раздел настройки (шестеренка) и нажать «поделиться».

поделиться

В открывшемся окне нужно перейти во вкладку «Код»:

Карта Славутич

Предварительно задайте необходимое масштабирование.

Осталось скопировать выделенный на скриншоте выше код карты и вставить его в соответствующее место на сайте.

Слева от выделенного фрагмента есть вкладка, где можно выбрать размер карты. Есть 4 варианта: маленькая, средняя и большая. Так же можно задать любой другой размер в пикселях, в зависимости от верстки сайта, что позволит подстроить размеры карты под любой сайт. В дальнейшем его можно будет поменять, поэтому если сразу не задали длину и ширину – не беда.

При вставке кода в WordPress запись или на страницу, обязательно переключитесь в режим «Текст», так как в визуальном редакторе вставить карту не получится.

Так же можно добавить Google карту в виджет WordPress, достаточно просто вставить нужный код с помощью «произвольного текста».

карта гугл в виджет

Обратите внимание на подчеркнутые строчки.

Width – это ширина

Height – это высота.

Изменив эти параметры вы с легкостью сможете настроить нужные размеры карты для вашего сайта, если не задали их в предварительном форматировании.

В итоге получилось следующее:

Вот такая Google карта будет у вас на сайте, если следовать инструкции.

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

Есть еще очень много настроек, которых можно задать для карты:

Сделать карту-спутник:

спутниковая карта

Можно указать маршрут от одного места до другого.

как добраться

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

маршрут на карте

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

Так же можно настроить отображение пробок, нажав на кнопку выделенную на скрине ниже.

пробки на карте

Можно выбрать определенную точку на карте – маркер. Это может быть полезно, если необходимо указать адрес компании или организации.

Карта гугл

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

Способ вставить Google карту на сайт № 2

Не знаю по какой причине, но Гугл карты доступны по двум разным адресам (URL) и имеют несколько отличающийся интерфейс.

Как бы там ни было, рассмотрим добавление Гугл карт альтернативным способом.

Переходим по ссылке:

Ищем в поиске интересующий дом или объект.

Слева есть блок с кнопками:

добавить код карты на сайт

Нажимаем кнопку, выделенную красным (скриншот выше), а далее все просто: появится блок, в котором будет размещен html-код, который нужно скопировать и добавить на сайт. Процесс добавления аналогичен тому, что я описал в начале статьи.

код карты

Само собой можно задать маршрут:

проложить маршрут

В итоге получился такой результат:



Код несколько отличается от предыдущего, но так же позволяет сделать некоторые схожие настройки:

width="425" – изменяет значение в кавычках, для указания нужное ширины.

height="350" – высота.

Если вдруг встанет необходимость разместить блок с картой посредине (выравнивание по центру), то для этого достаточно заключить код с картой в теги <center>код карты…</center>

Способ добавить Google карту на сайт № 3

Не поверите, есть еще и 3-й способ размещения Google карты на Вордпресс сайте без плагина.

Правда эта карта будет несколько отличатся от предыдущих. Чем? Тем, что ее можно редактировать. Можно изменять, задавать своим метки (маркеры) со своими названиями и описаниями.

Доступна она по адресу: .

Зайдя на страничку по ссылке, необходимо создать Гугл карту:

создать новую карту для сайта

Вбиваем интересующий город или адрес.

Возле блока с поиском вы увидите инструменты, с помощью которых можно редактировать карту:

редактировать карту

Первая кнопка (из выделенных) – маркер, позволяет создать точку на карте с возможностью задать название и описание:

марке на Google maps

Это более чем существенное преимущество по сравнению с предыдущими вариантами.

Вторая кнопка – выделение области:

маркировання область

3 – я кнопка – добавление маршрута.

маршрут от точки до точки

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

название карты

Измените уровень доступа на «общедоступный в интернете»:

общедоступная карта

Осталось дело за малым: необходимо получить код Google карты, сделать это можно нажав на значок папки:

добавить на сайт Google map

После чего, копируем из всплывшего окошка код карты и вставляем на свой сайт, в результате получаем следующее:
Фух…пожалуй на этом все, добавление Яндекс карты я распишу ближе к вечеру, а статья про плагины Яндекс и Google карт будет завтра.

17.05.201409.07.2014 Юрий Белоусов


Источник: http://needsite.net/google-maps-wordpress-dobavit/


Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Как сделать свою карту в гугл мапс

Похожие новости:






[/SHORT_NEWS_LAST]
Страници: 1 2 3 > >>