Как вставить карты гугл(Google Maps) сайт(WordPress). Как вставить гугл карту на сайт wordpress
Как вставить Google карту на страницу сайта WordPress
Здравствуйте друзья! В этом уроке мы разберем с вами как добавить гугл карту на страницу или запись вашего сайта на WordPress.
Как вставить Google-карту на страницу сайта
Для начала нам нужно зайти по ссылке google.ru/maps и найти страну/город или необходимый адрес на карте. Найти необходимое место можно просто листая карту, или ввести адрес в поле для поиска, для примера давайте добавим карту на сайт с Австралией.
Для этого нам нужно:
1) Ввести в поле для поиска «Австралия» (или любую другую страну, город, или точный адрес с улицей которая вам нужна).
Поиск Австралии на гугл карте
2) После того как Вы нашли нужное место, нажмите в левом верхнем углу на значок меню.
3) Теперь нажмите «Поделиться с друзьями или получите код карты«.
4) В открывшемся окне перейдите на вкладку Код.
Переходим на вкладку Код
5) В вкладке Код, скопируйте всю строчку кода (фрейм).
Код выглядит так:
| 1 | <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14633025.482991382!2d133.28132295!3d-26.4390917!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2z0JDQstGB0YLRgNCw0LvQuNGP!5e0!3m2!1sru!2sru!4v1419453063815" frameborder="0"></iframe> |
Копируем всю строчку кода
6) После этого откройте страницу сайта на которую вы хотите вставить карту и перейдите на вкладку редактора «Текст». Теперь вставьте скопированный код с гугл карт.
После этого можно сохранять страницу, и карта уже готова.
Для вставки карты нужно перейти на вкладку Текст
Важно! Если вы хотите изменить высоту или ширину карты, измените значения width (ширина) и height (высота) в коде карты, в вкладке редактора Текст. К примеру, если вы хотите вставить карту на сайт размером 500px в ширину и 800px в высоту, значения должны быть width=’500′ height=’800′.
Также, изменить размер карты можно мышкой, стягивая или растягивая фрейм карты. Для того чтобы так делать, перейдите на вкладку редактора Визуально.
Как видите все очень просто и делается очень быстро. Если у вас что-то не получилось, или остались вопросы, задавайте их в комментариях здесь или на этой странице.
Результат вставки гугл карты, по примеру с урока:
learnprosoft.com
Карта Google на сайт, инструкция как вставить.
Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.
На самом деле, разместить карту на сайте, с отмеченным адресом, плевое дело. Однако, к сожалению, многие этого не делают. Да, если у вас просто блог, то карта навряд ли вам пригодится. Но если ваш сайт является представителем реально существующего офиса в оффлайне, то карта на сайте, просто необходима. И неважно, касается это офиса много миллиардной компании, или это всего лишь сайт местной мастерской. Давайте посмотрим, как разместить карту на вашем сайте или блоге.
В русскоязычной части интернета, наиболее популярны карты от двух компаний: Гугл и Яндекс. Не буду говорить, сервис какой компании лучше, но сегодня я расскажу про сервис от компании Гугл.
Как вставить Google карту на сайт.
Существует несколько способов, для того, чтобы вставить гугл карты на свой сайт, и не важно, работает сайт под CMS WordPress или просто на HTML.
Способ № 1.
Перейдем на сайт — google.com/maps и выберем нужный адрес в строке поиска.
Обратите внимание, у карты есть два режима, упрощенный и полный. Если вы попали на упрощенный вид, то нужно перейти на полный вид. Для этого нужно просто нажать на значок в правом нижнем углу.
После чего, нужно в левом меню, выбрать пункт – «Поделиться».
И выбрать пункт – «Код»
После чего, у вас сразу отобразится карта с несколькими настройками: масштаб и размер карты; маленький, средний, большой, пользовательский. После чего, вы нужно скопировать код.
И вставить его в нужное место на сайте. Обратите внимание, если сайт на WordPress, то для вставки кода, достаточно перевести редактор в режим текста, и вставить код в нужное место. Или же вставить код в боковой виджет.
И вот что получится.
Далее, посетитель сайта, уже сможет дальше изменить масштаб, проложить путь до нужной точки, сделать вид со спутника и так далее.
Способ № 2.
Хотя первый способ, очень простой и позволяет вставить карту Google на сайт буквально в пару кликов, давайте разберем второй способ.
Нужно перейти по адресу — www.google.ru/maps. А далее? Да все как в первом способе. Также выбираете нужное месторасположение, и выбираете код. Единственная разница – сам адрес. А так сервис полностью идентичен.
Подозреваю, что свои адреса для карт имеются для всех доменных зон, коих у Гугл совсем не мало.
Способ № 3.
Но есть и третий способ. Уж он-то отличается от первых двух. Различие – больше настроек. Давайте перейдем на него.
www.google.com/maps
Вначале сервис вам скажет, что у вас нет карт. Что ж, нужно создать. Для этого, необходимо нажать на значок «+»
Здесь есть ряд дополнительных элементов: выбрать объекты, добавить маркер, нарисовать линию, добавить маршрут, измерить расстояние или площадь.
Вставив маркер в нужное место, можно вставить название места и его описание.
При необходимости, можно добавить маршрут, по которому легче проехать.
После этого, нужно нажать на кнопку – «Поделиться»
Добавить название и описание карты.
Настроить доступ
И сохранить изменения
Далее, нажав на три точки справа, выбрать «Добавить на сайт» в появившемся меню.
И теперь, можно вставить полученный код на сайт, при этом, можно сразу изменить размеры.
И вот что в результате получится
Таким образом, теперь вам не составит большого труда вставить на ваш сайт карту Гугл, и теперь, вашим клиентам, не придется искать ваш офис, как мне когда-то. И еще напомню. Эти методы, можно использовать на всех типах сайтах, будь это чистый HTML или же CMS, например WordPress.
Ну а если у вас есть вопросы, задавайте их в комментариях, и я обязательно на них отвечу.
Загрузка... 
Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!
Как вставить карты гугл(Google Maps) сайт(WordPress)
Почти на сайтах всех компаний обязательно размещена карта проезда, вебмастеры тоже часто используют вставку карт в свои сайты-каталоги организаций и т.д., случай с установкой карт от яндекса мы уже разобрали.
Размещение карт от Гугл на сайте и его страницах позволяет вам разбивать большие текстовые блоки графическим наполнением, и делать их более приятными для восприятия читателями.
В этой статье мы рассмотрим два простых способа, как за пару минут добавить карты Google Maps на сайт:
- 1. Непосредственно вставить из Google Maps
- 2. Плагин Google Maps от WPMUDEV
Метод вставки на WordPress сайт карт из Google Maps
Откройте Google Maps и введите в поисковую строку адрес. Например, мы ввели случайный запрос «Тверской район, Москва, дом 1,» выбрали здание кафе, и вот что получили:
В верхнем левом углу картинки можно нажать на картинку в виде звена цепи, и открыть диалоговое окно для вставки карты на сайт. Вы можете настроить некоторые элементы (такие как размер карты, цвет границ и т.д). Скопируйте этот код и вставьте его на свой сайт, используя HTML-редактор на странице записи.
Когда вы сохраните страницу или запись, то увидите выбранную карту Google непосредственно на своей странице. У нее будут практически такие же функциональные возможности, как и на странице самой Google-карты. Вы сможете приближать, менять направление, получать информацию об адресах и т.д.
Плагин Google Maps
WPMUDEV создали замечательный Google Maps-плагин, который даст вам дополнительные возможности относительно карт google на ваш сайт. Кроме того, плагин добавляет возможности редактирования, позволяющие изменять вид карты на сайте.
Google Maps Плагин
Вместо того чтобы копировать код из google, вы можете вставить карты непосредственно из вашей записи или страницы, используя иконку «Добавить карту» в визуальном редакторе. Вы можете использовать пользовательские разделы для взаимодействия с геолокационным плагином, даже добавлять на карту панорамное изображение.
У плагина есть виджет, который вы можете использовать на боковой панели или в любом другом месте на вашем сайте для размещения карт рядом со страницей или постом.
А владеющие некоторыми навыками в CSS могут добавлять свои уникальные пользовательские стили для того, чтобы такая карта от гугл выглядела красиво на вашем сайте.
great-world.ru
