Карты google установить


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Слева от выделенного фрагмента есть вкладка, где можно выбрать размер карты. Есть 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/.

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

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

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

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

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

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

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

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

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

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

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

needsite.net

Карта google для сайта или как вставить google карту на сайт

Как вставить карту Google на сайт? Вставляем карту Google на свой сайт.

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

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

Сам сервис Карты Google можно найти по следующей ссылке http://maps.google.ru/. Перейдя на страницу сервиса Google Maps, Вы увидите карту мира:

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

Теперь нам необходимо найти на карте, нужное нам место, для более удобного поиска по карте Google, можно включить режим отображения карты со спутника:

Теперь необходимо поставить метку на карте на нужном нам месте. Для этого нажмите на кнопку «Мои метки» в левом верхнем углу:

Если Вы не авторизовались на Google, то Вам будет предложено это сделать. После чего Вам необходимо нажать на кнопку «Создать карту»

Вам будет предложено заполнить следующую форму:

В поле «Название» необходимо указать название метки (название организации, фирмы и т.д.). В поле «Описание» указываем краткое описание места, на которое устанавливаем метку на карте. Дальше Вы можете выбрать, как добавить метку (или сайт) на Google карту: «Открытый доступ» — все пользователи смогут увидеть Вашу добавленную на карту метку.

После того как вы заполнили форму с описанием метки на карте нажмите на кнопку «Метка на карте» и установите метку в нужном месте, и так же назовите ее и дайте ей описание:

После чего нажмите «OK».

Теперь нам необходимо получить HTML код карты Google для вставки на сайт. Для этого нам нужно нажать на кнопку «Ссылка»:

Здесь нужно выбрать способ вставки карты на сайт. Если Вам необходимо просто получить ссылку на карту с данной меткой, то просто скопируйте URL адрес ссылки на данную карту с меткой из первой строки. Если Вам необходимо вставить карту Google на сайт или блог, нажмите на ссылку «Настройка и предварительный просмотр встроенной карты», где можно более точно указать настройки параметров карт Google для вставки и посмотреть, как она будет выглядеть, не вставляя карту на сайт.

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

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

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

www.09web.ru

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

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

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

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

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

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

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

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

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

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

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

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

Карта от Google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

starper55plys.ru

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

Всем привет!Я думаю, вы не только замечали на сайтах различных компаний и интернет магазинов карту проезда, но и пользовались подобной картой, чтобы установить маршрут и найти, где находится фирма и как туда проехать.В этой статье  я расскажу, как вставить Google карты (Google maps) на сайт. Данный способ вставки карты подойдет как на обычные сайты, так и на WordPress, Joomla и т.д.К слову также скажу, что в базе BlogGood.ru есть еще статья по теме «Как добавить Яндекс карту».

Чтобы вставить Google карты (Google maps) на сайт, зайдите на официальную страничку сервиса Google maps:

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

Теперь в форму поиска «Искать на Google Картах» введите нужный адрес вашей компании, гостиницы, студии и т.д., например, Житомирская область, город Коростень ул. Грушевского 35:

После того, как вы нажмете на лупу «ПОИСК», перед вами откроется карта уже с помеченным указанным местом, со всеми прилегающими улицами, дорогами и соседними адресами:

Если вам нужно проложить маршрут, нажмите слева на ссылку «Проложить маршрут»:

На скриншоте я показал, где нужно ввести второй адрес (куда будет идти маршрут), например, улица Юрия Гагарина, Коростень, Житомирска область:

Теперь нам нужно получить код и установить его на сайт. Для этого перейдите по меню (три горизонтальные полоски):

И в меню выберите «Ссылка/код»:

Перед вами откроется два способа добавления Google maps на сайт, это «Ссылка» либо «Код»:

Ссылка – при переходе по ссылке, пользователю откроется сайт Google maps с уже настроенной картой и с маршрутом (если вы его указали). Копируйте адрес ссылки и вставляйте на сайт:

Вид ссылки в HTM-коде на сайте будет вот таким:

<a href="https://goo.gl/maps/FFE2Fm84tc12"> КАРТА ПРОЕЗДА </a>

Код – при вставке кода на вашем сайте будет отображаться Google maps со всеми ее опциями (масштаб, маршрут и т.д.). В настройках можно выбрать размер карты «Маленькая», «Средняя», «Большая», «Другой размер». Копируйте код и вставляйте на сайт в то место, где хотите, чтобы отображалась Google карта:

Обратите внимание, что в коде есть такие параметры как «width» – это ширина. Если у вас адаптивный сайт, то рекомендую поменять на значение в  процентах (%), например, было так:

width="600"

станет так:

width="100%"

Если вы используете WordPress, то этот код можно вставить в саму статью, например, назвать «Карта проезда» или «Контакты» и в текстовом редакторе в режиме «Текст» вставляйте код от Google maps:

Также можно вставить код в сам файл. Этот способ подойдет, если вы, хоть чуточку, разбираетесь в HTML.  Итак, зайдите в админке вордпресс на «Внешний вид» => «Редактор» и в нужном файле вставьте ваш код, например, в подвале сайта (самый низ сайта) «footer.php».

Можно вставить код через виджет.  Перетащите виджет «ТЕКСТ» в нужное место и вставьте в него код:

Ничего сложно для тех, кто хоть чуточку знает WordPress.

Вроде все. Вот такая вот карта вышла у меня на блоге.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: wordpress, без плагинов, Вебмастеру, для сайта

bloggood.ru

создание карт с помощью вкладки "Мои карты"

Создание карт с помощью вкладки "Мои карты"

Создавать собственные карты стало как никогда просто. С помощью вкладки "Мои карты" можно отмечать места, маршруты и интересующие вас области на личной карте и показывать ее своим знакомым! Кроме того, можно даже добавлять описательный текст, фотографии и видеоролики и просматривать карту в программе Google Планета Земля.

С помощью вкладки "Мои карты" можно сделать много замечательного для вашей организации. Вот несколько идей для начала.

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

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

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

 

Необходимые условия
  • Для этого не требуется никаких навыков программирования!
  • Для того чтобы создавать карты на вкладке "Мои карты", необходимо войти в свой аккаунт Google. Если у вас еще нет аккаунта, то вы можете создать его здесь. (Платить за это не нужно.)

 

Начнем!
  1. Перейдите на сайт Карты Google.
  2. Войдите в свой аккаунт, если вы еще этого не сделали, нажав на ссылку вверху справа.
  3. Перейдите на вкладку "Мои карты". Откроется пустая страница "Мои карты", такая как эта:
  4. Выберите Создать новую карту.
  5. Добавьте заголовок и описание своей карты. Карту можно сделать общедоступной или закрытой. Мы сделаем свою карту открытой, чтобы она появлялась в результатах поиска.
  6. Нажмите Сохранить.
  7. Давайте приблизим территорию, на которой будет проходить уборка. Введите в окно поиска "Сортавала, Республика Карелия" и увеличьте карту. После этого перейдите на вкладку "Мои карты", чтобы вернуться к своей карте.
  8. Переключитесь на вид "Гибрид", чтобы посмотреть снимок со спутника вместе с информацией о трассах. Нажмите кнопку "Гибрид", расположенную в верхнем правом углу карты.

Теперь давайте добавим метки, линии и фигуры. Убедитесь, что вы установили флажок "Субботник Google" в верхнем левом столбце, это название карты, которую мы будем редактировать.

 

Добавление меток: давайте отметим места сбора группы!
  1. Нажмите в верхнем левом углу карты. Курсор превратится в значок метки с крестиком. Крестик указывает на место, где будет установлена метка.
  2. Предлагаем сначала отметить точку начала уборки. Переместите курсор в нужное место. Если вы хотите удалить метку, нажмите на клавишу "Esc".
  3. Нажмите кнопку мыши, чтобы поставить метку. Она должна "прыгнуть" в нужное место.
  4. Добавьте заголовок и описание.
  5. Также можно изменить значок метки, нажав на значок в правом верхнем углу информационного окна.
  6. Нажмите ОК, чтобы сохранить метку.
  7. Добавьте другую метку для конечной точки. После добавления этих двух меток карта будет выглядеть вот так.
Примечания.
  • Чтобы переместить метку на карте, перетащите ее в нужное место. Обратите внимание, что изменять и перемещать метки можно только на собственных картах, а на чужих – нет.
  • Чтобы изменить заголовок или описание метки, нажмите на нее, и откроется информационное окно. Измените заголовок и описание, затем нажмите ОК.

 

Добавление линий: покажем маршруты следования!
  1. Нажмите на . Курсор будет выглядеть так:
  2. Сначала мы покажем маршрут уборки для команды "Красных". Переместите курсор в нужное место и нажмите кнопку мыши, чтобы начать рисовать линию. Если вы хотите удалить линию, нажмите на клавишу "Esc".
  3. Нажимайте кнопку мыши в каждой точке линии.
  4. Чтобы закончить рисовать линию, дважды нажмите кнопку мыши на последней точке.
  5. Добавьте заголовок и описание.
  6. Также можно изменить цвет, прозрачность и ширину линии, нажав на значок с красками в правом верхнем углу информационного окна.
  7. Нажмите ОК, чтобы сохранить линию.
  8. Добавьте еще одну линию для команды "Синих". После добавления этих двух маршрутов карта будет выглядеть следующим образом.
Примечания.
  • Чтобы переместить линию на карте, наведите на нее курсор, и появится соответствующий значок. Чтобы переместить точки, нажимайте на них и перетаскивайте их в нужное место.
  • Чтобы удалить точку с линии, нажмите на ней правой кнопкой мыши и выберите Удалить из контекстного меню.
  • Чтобы добавить точку на линию, можно нажать на одну из полупрозрачных точек или правой кнопкой мыши нажать на линию и выбрать Добавить точку из контекстного меню.
  • Чтобы изменить заголовок или описание линии, нажмите на нее, и откроется информационное окно. Измените заголовок и описание, затем нажмите ОК.

 

Добавление фигур: покажем место проведения пикника!
  1. Нажмите на . Курсор будет выглядеть так:
  2. Теперь мы можем обвести место для пикника. Переместите курсор в нужное место и нажмите кнопку мыши, чтобы начать рисовать фигуру. Если вы хотите удалить фигуру, нажмите на клавишу "Esc".
  3. Нажимайте кнопку мыши в каждой вершине фигуры.
  4. Чтобы закончить рисовать фигуру, дважды нажмите на последней точке или нажмите на начальной точке, чтобы замкнуть линию.
  5. Добавьте заголовок и описание.
  6. Также можно изменить цвет и прозрачность фигуры, нажав на значок с красками в правом верхнем углу информационного окна.
  7. Нажмите ОК, чтобы сохранить фигуру.
Примечания.
  • Чтобы переместить фигуру на карте, наведите на нее курсор и появится соответствующий значок. Чтобы переместить точки, нажимайте на них и перетаскивайте в нужное место.
  • Чтобы удалить точку с фигуры, нажмите на ней правой кнопкой мыши и выберите Удалить из контекстного меню.
  • Чтобы добавить точку на фигуру, можно нажать на одну из полупрозрачных точек или правой кнопкой мыши нажать на фигуру и выбрать Добавить точку из контекстного меню.
  • Чтобы изменить заголовок или описание фигуры, нажмите на нее, и откроется информационное окно. Измените заголовок и описание, затем нажмите ОК.

Все готово! Не забудьте сохранить свою карту!

Посмотрите на готовую карту!

Вы можете вернуться к своей карте в любой момент. Просто зайдите в Карты Google и выберите Мои карты. Войдите в свой аккаунт Google и выберите карту из списка своих карт.

 

Покажите свою карту добровольцам

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

У вас есть две возможности: отправить ссылку электронным или мгновенным сообщением, либо добавить карту на веб-сайт своей организации. Давайте отправим карту добровольцам по электронной почте.

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

Теперь участники акции смогут легко посмотреть карту, собираясь на хорошо спланированное мероприятие!

Прочитайте дополнительную информацию об использовании вкладки "Мои карты", например о добавлении фотографий или форматировании текста.

 

earth.google.com


Смотрите также