Карта на сайт. 2Gis, Google и Яндекс карты. Карта на сайт


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

Здравствуйте уважаемые начинающие веб-мастера.

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

Из этой ситуации, как и положено, есть два выхода — один через сервис Яндекса, другой через сервис Google.

Карта от Яндекса

Так как выход через Яндекс гораздо удобнее, просторнее и короче, то с него и начнём.

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

Подскажу только что перед тем как нажать Создать карту, прокрутите слайдер до картинки Узнайте о возможностях Конструктора, и перейдите по ссылке Помощь, открыв её в новой вкладке

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

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

Вот результат 5-и минутной работы.

Ещё несколько минут, и можно проложить маршрут из любой точки мира, к нашей площадке.

Карта от Google

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

Несмотря на множество инструкций в сети по созданию карты Google на своём сайте без плагина, сделать это оказалось не так уж просто.

Первое, о чём не сказано ни в одной инструкции — это о необходимости иметь аккаунт в Coogle, так как сервис-то Гугловский.

Конечно аккаунт веб мастеру необходим, но для новичка этот момент может оказаться тормозом.

Но даже если аккаунт у Вас есть, то после создания карты Вас ждёт ещё одна «приятная» неожиданность.

Дело в том, что по умолчанию в Google картах включён упрощённый режим, в котором отключены некоторые функции, среди которых и установка карты на сайт, и значит получить в нём код для вставки невозможно.

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

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

Если у Вас ещё нет аккаунта в Гугле, то вводим в поисковой строке Аккаунт Google и создаём его.

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

Аккаунт есть, теперь идём в сервис Google Mars и на открывшейся карте, в правом нижнем углу находим значок молнии.

9

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

10

Вот теперь вводим адрес в поле поиска, и Гугл сам найдёт это место, поставит метку, покажет панораму и предложит проложить маршрут.

Правда панорама будет прошлогодней или что-то около того, но тут уж ничего не поделаеш, таковы возможности сервиса.

11

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

Основная наша цель — получить код для вставки на сайт.

Находится он под значком меню (три горизонтальные палочки) в левом верхнем углу экрана, в пункте меню Ссылка/Код.

Щелкаем по нему, затем в открывшемся окне по Код, и вот он — предмет наших устремлений.

12

Копируем и вставляем на страницу сайта, в том месте текста, где надо разместить карту. Код вставляется в режиме редактора Текст.

Вот результат.

Карту можно вставить не только в страницу, но и в виджет Текст, и тем самым разместить её в сайдбаре сайта.

При этом в коде карты возможно придётся найти атрибуты width и height, задающие размер отображаемой карты и переписать в них значения на более мелкие, чтоб втиснуть её в сайдбар.

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

Или показать маршрут предполагаемой экскурсии, тур похода, рыбалки, охоты и т.п.

Дочерние темы < < < В раздел > > > Правим шаблон

starper55plys.ru

Как вставить Google карты (Google maps) на сайт

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

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

Google карта

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

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

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

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

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

https://www.google.com/maps/

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

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

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

поделиться

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

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

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

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

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

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

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

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

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

Width – это ширина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта гугл

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

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

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

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

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

https://maps.google.com.ua

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

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

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

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

код карты

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

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

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

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

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

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

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

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

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

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

Доступна она по адресу: https://mapsengine.google.com/map/.

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

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

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

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

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

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

марке на Google maps

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

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

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

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

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

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

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

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

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

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

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

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

needsite.net

Карта на сайт. 2Gis, Google и Яндекс карты

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

В любом случае, перед тем как понять как встраивать карту на сайт, неоходимо определиться с выбором карты. Обычно в это сфере есть 3 фаворита - Яндекс карты, Google карты и карты 2Gis.

Каждая из них особенная по своему. Я больше всего люблю различные сервисы и примочки от Яндекс, но касаемо карт мое предпочтение падает на 2Gis карты. Думаю такое предпочтение сложилось у большинства жителей стран СНГ. 2Gis карты более точны, в отличие от Яндекс Карт. Google карты используются в основном западными странами и США.

Если обратить внимание на сайт и даже шаблоны, что разрабатывают американские и европейские разработчики, то почти везде есть в опциях подключение именно Google карт по адресу компании или же по широте или долготе. К сожалению встроенные опции для карт часто ошибаются и показывают точку на карте не совсем точно.

Яндекс карты. Некоторые особенности

Как многие ищут карты в поиске? Просто вбивают в первый попавшийся поисковик "Яндекс карты" и далее уже переходят собственно на сами карты и там вбивают адрес для поиска. У яндекс карт есть одна примочка, которая почему то появляется только в mail.ru поиске - Панель поиска по адресу сразу в сниппете выдачи, что на один клик упрощает задачу поиска по картам.

Яндекс говорили и показывали что много подобных примочек разработали, но почему это не появляется в Яндекс и Google поиске, а только в сравнительно мало конкурентном поиске от mail.ru.

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

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

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

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

В случае Яндекса, проще всего заново создать карту в конструкторе карт, который находится по адресу https://tech.yandex.ru/maps/tools/constructor/ и позволяет в ручном режиме ответить здание или даже выделить целую территорию и обозначить ее каким-либо наименованием. Для примера я взял действующую организацию - детский центр "Грамотейка" в городе Караганда.

После того, как нажали готово, можно либо в интерактивном режиме задать размер встраиваемой карты, растянув рамку как требуется, либо задать более точные координаты. Также есть возможность изменить масштаб карты, просто покрутив колесиком мыши. Если  не нужна фиксированная ширина можете поставить под размерами галочку "растянуть на 100%". После чего копируете код и встраиваете на сайт.

Не советую прибегать к использованию плагинов для встраивания карты на сайт. Может это и упростит задачу но создаст лишнюю нагрузку на сайт и может конфликтовать с другими плагинами.

Некоторые особенности карты Google (Google maps)

Если сравнивать с Яндексом, то также только в mail.ru появляется специализированный сниппет. Можно напрямую в сниппете ввести адрес, который нужно найти.

Организации на картах Google выглядят также хорошо только со своеобразной гео-меткой. Рассмотрим пример все на том же детском центре "Грамотейка" Со значком на карте все понятно, а что касается подробной информации об организации, то она находится на панели слева и довольно таки симпатично оформлена. На скрине ниже не все данные, можно заполнить больше, при желании.

Огромным минусом google карт считаю то, что на них нет многих зданий, построенных за последние годы. Например, детский центр находится в отдельно стоящем 2х-этажном здании, которому как минимум лет 5, но его как видите нет на карте. Когда регистрировал организацию на карте, пришлось ставить метку в пустое место на карте.

Других серьезных особенностей, которые отличали бы его от того же Яндекса я не вижу. Все предельно просто в использовании и оформлено в стандартном минимализме от Google.

Google карта на сайте. Как быстро получить код для вставки

В левом верхнем углу экрана Google карт нажмите на меню. Откроется меню с настройками и там выберите пункт "Поделитесь с друзьями или получите код карты".  В открывшемся окне выберите вкладку "Код". Можете также выбрать размер карты - маленький, средний и большой. Также есть возможность перед копирование кода задать свой размер. После, копируете код и вставляете его себе на сайт, в необходимом Вам месте.

Например у данной карты код выглядит следующим образом.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4329.899570259801!2d73.10747869329973!3d49.81288191729733!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4243471d5a812643%3A0x1b5f586e1e25fd0a!2z0JTQtdGC0YHQutC40Lkg0YbQtdC90YLRgCAi0JPRgNCw0LzQvtGC0LXQudC60LAiINCa0LDRgNCw0LPQsNC90LTQsA!5e0!3m2!1sru!2sru!4v1446045967120" frameborder="0" allowfullscreen></iframe>

где, width="600" - ширина и высота карты, в px.

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

Особенности 2Gis карты

Карты 2Gis никогда бы не стали так популярны, если бы не тщательно проделанная работа по составлению карт и просто лучший сервис, направленный в первую очередь на пользователя. Пользоваться их картами одно удовольствие.

Абсолютно все здания и сооружения есть на 2Gis картах и даже те, которые только строятся уже особым образом отмечены на картах. К тому же особым плюсом карт считаю их возможность скачивания на компьютер или смартфон и использование в оффлайн режиме.

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

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

Забавный момент есть в составлении маршрута - если объект находится сравнительно недалеко, то сервис предлагает пройтись лучше пешком т.к. это полезно для здоровья.

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

Для того чтобы встроить карту 2Gis на сайт, Вам необходимо посмотреть на правый нижный угол карты и найти там значок "поделиться ссылкой". При нажатии на него появится всплывающее окно, на котором необходимо кликнуть на ссылку "Установите карту и справочник на свой сайт". Откроется новая страница, с дальнейшими указаниями. Нажимаете на кнопку создать виджет.

Первым шагом Вам будет необходимо найти свою организацию в справочнике

При нажатии на кнопку далее, Вам необходимо согласиться с лицензионным соглашением и шаге №3 Вы получите код для вставки на сайт. Стандартно размер карты 640 на 600 и масштаб карты 16.

При желании эти размеры можете поменять самостоятельно в коде.

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

Поделитесь статьей с друзьями

Похожее

alexbrush.com