Как добавить на сайт карту Google28.10.2011 11:01

Необходимо перейти на сайт карт Google http://maps.google.com?hl=ru (hl=ru - это русский язык интерфейса). Набрать адрес. Тут может понадобиться ввести страну, город, улицу, номер дома. После нажатия на кнопку "Поиск" на карте будет искомый адрес.




В верхнем правом углу есть иконка "цепь". Если на неё нажать, появляется окно, в котором есть коды для вставки на сайт. Можно просто скопировать "HTML код для добавления на веб-сайт", а можно нажать на ссылку "Настройка и предварительный просмотр встроенной карты", по которой откроется еще одно окно.




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



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

 

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=ru&amp;geocode=&amp;
q=%D0%BA%D0%B8%D0%B5%D0%B2+%D0%BA%D1%80%D0%B5%D1%89%D0%B0%D1%82%D0%B8%D0%BA+25&amp;
aq=&amp;sll=37.0625,-95.677068&amp;sspn=52.107327,66.445312&amp;vpsrc=6&amp;ie=UTF8&amp;
hq=%D0%BA%D1%80%D0%B5%D1%89%D0%B0%D1%82%D0%B8%D0%BA+25&amp;
hnear=%D0%9A%D0%B8%D0%B5%D0%B2,+%D0%B3%D0%BE%D1%80%D0%BE%D0%B4
+%D0%9A%D0%B8%D0%B5%D0%B2,+%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D0%B0&amp;t=m&amp;
ll=50.44421,30.521758&amp;spn=0.004783,0.00912&amp;z=16&amp;output=embed"></iframe>

<br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=ru&amp;geocode=&amp;
q=%D0%BA%D0%B8%D0%B5%D0%B2+%D0%BA%D1%80%D0%B5%D1%89%D0%B0%D1%82%D0%B8%D0%BA+25&amp;
aq=&amp;sll=37.0625,-95.677068&amp;sspn=52.107327,66.445312&amp;vpsrc=6&amp;ie=UTF8&amp;
hq=%D0%BA%D1%80%D0%B5%D1%89%D0%B0%D1%82%D0%B8%D0%BA+25&amp;
hnear=%D0%9A%D0%B8%D0%B5%D0%B2,+%D0%B3%D0%BE%D1%80%D0%BE%D0%B4+%D0%9A%D0%B8%D0%B5%D0%B2,
+%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D0%B0&amp;t=m&amp;
ll=50.44421,30.521758&amp;spn=0.004783,0.00912&amp;z=16" style="color:#0000FF;text-align:left">
Просмотреть увеличенную карту</a></small>


Если внимательно посмотреть, то видно, что код состоит из двух частей - <iframe> и <small>. <iframe> - это собственно карта, а <small> - дополнительная ссылка, которую при желании можно убрать.

Как выглядит реализация этого кода окончательно:


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


Продвинутые вебмастера, знающие HTML, заметят, что можно "поиграться" параметрами, как например, добавить рамку, указать точный размер iframe для удобства. И, как было сказано выше, можно убрать код после <br /><span>, он не влияет на карту.

<<< СМС биллинг. Простая монетизацая сайта при помощи SMS
Добавить на сайт карту от Yandex.Карты через API >>>

Комментарии

1.
Zaychini 31.10.2011 16:53
Спасибо большое!!! Все отлично работает!!!
2.
Александр 01.11.2011 16:37
Пожалуйста. Скоро добавлю еще инструкции по другим сервисам.
3.
Никита 29.11.2011 08:47
Это получилось. Спасибо.
4.
Александр 29.11.2011 09:17
Пользуйтесь!
5.
White 03.12.2011 14:07
Спасибо Вам. Всё получилось:)
6.
Жанна 13.12.2011 11:51
Получилось! Спасибо за статью.
7.
макс 13.12.2011 16:13
Подскажите куда вставлять скопируемый HTML в свой сайт,для того,чтобы карта появилась в контактах
8.
Александр 13.12.2011 16:44
Нужно вставлять на самой странице контактов. В том месте, где вы хотите видеть карту. Если вы не знаете, я сожалею, но написать более понятно не могу.
9.
KillectoR 18.01.2012 09:02
Благодарю!!
Отличная статья, как раз то, что я искал!! :)
10.
mzvi 20.02.2012 13:17
а у меня не вставилась, бывает ли непереносимость карты google у сайтов?
11.
Александр 20.02.2012 14:50
Еще раз прошу, если есть вопросы, а не комментарии, пишите непосредственно мне, веб-разработчику.
Если не вставилось, посмотрите код страницы, есть ли там тот код, который вы вставляли? Если нет, значит не поддерживается визуальным редактором, если есть, но не в том виде (некоторые редакторы, например TinyMCE обрезают код, или форматируют по-своему).
12.
Dimkas 27.06.2012 11:14
Велике дякую автору!
13.
Vitaliy 16.07.2012 23:46
Подскажите, как убрать всплывающий диалог по умолчанию?
14.
Антон!!! 24.08.2012 14:04
Все с первого раза заработало! Спасибо!!!
15.
Ирина 14.09.2012 12:03
Спасибо большое, поставила на сайт, всё просто и понятно! Спасибо за информацию!
16.
Александр 24.09.2012 15:13
Пользуйтесь на здоровье!
17.
Дима 24.10.2012 17:47
Вопрос. На сайте была гугл карта, на её место вставил карту, но с другими координатами, а она все равно отображает старую местность. В чем причина?
18.
14.11.2012 23:06
Дякую за корисну інформацію і за Ваш корисний блог в цілому. Усе дуже корисно й вичерпно. Усе працює
19.
Александр 15.11.2012 10:06
Пользуйтесь на здоровье! Если есть конкретные вопросы- пожалуйста в форму обратной связи, чтобы я мог связаться с вами и решить проблему.
20.
Serg 05.03.2013 09:57
Спасибо за инфу про TinyMCE, а чуть дураком не стал :P
21.
АНУАР 07.03.2013 13:54
СКОПИРОВАТЬ HTML А ПОТОМ КУДА ИМЕНО НА СВОЙ САЙТ КОПИРОВАТЬ???
22.
Александр, веб-разработчик 07.03.2013 15:53
2 АНУАР: Вопрос не корректный. Ответ может быть простым - "туда, где должна быть карта". Но вы бы поставили сами, если бы знали.
23.
Татьяна 25.05.2013 23:12
Александр, Бог Вам в помощь и не только на безбрежных просторах интернета! Толково и наглядно. Всё сделала чётко по инструкции. Уже работает!Добавила Ваш сайт в закладки, чтобы приходить на Ваш ценный ресурс.
24.
Александр, веб-разработчик 26.05.2013 13:04
Спасибо, Татьяна, за добрые слова. Спасибо всем, кто читает мой блог. По мере сил буду пополнять новыми статьями.
25.
PR@etorian 07.06.2013 09:26
спасибо огромное, помогло!
26.
Рман 10.06.2013 10:56
Спасибо большое! Всё легко и быстро получилось!
27.
Юрий 23.06.2013 11:32
Спасибо
28.
Нина 09.07.2013 05:41
Огромное спасибо Вам!!! Все получилось!Успехов Вам во всем!
29.
Мария 10.07.2013 15:17
Спасибо! Все сделала быстро без каких-либо затруднений!!!))
30.
Юрий 02.08.2013 14:39
Навигационные кнопки карты на сайте Гугл и на карте вставленной на сайт отличаются. Как сделать чтобы на сайте кнопки были такие же как и на сайте Гугла? Особенно нужна кнопка (человечек) панорамы.
31.
Александр, веб-разработчик 03.08.2013 14:03
Юрий, я думаю, что данная функция не поддерживается, потому что для этого нужно загружать дополнительные скрипты. То, что вы хотите, нужно, наверное, но Google сам решает что показывать а что нет.
32.
Олеся 05.09.2013 10:12
А как сделать так, чтобы еще добавилась ссылка "посмотреть на карте"?
33.
dj hoodo 29.09.2013 12:53
а она сама появляется ссылка "посмотреть на карте" но можно и убрать
34.
Ирина 02.10.2013 10:39
А у меня появилась ссылка Посмотреть увеличенную карту, а саму карту не видно. Сайт на Joomla
35.
Александр, разработчик 02.10.2013 10:49
Пожалуйста, если у вас есть вопросы, пишите в обратную связь.
36.
Петар Петров 06.10.2013 12:01
Спосибо! Класная работа!!
37.
Равиль 11.10.2013 14:34
А как убрать нижнюю строчку "Powered by Google, картографические данные 2013 Google"?) Возможно ли это?
38.
Серега 12.10.2013 22:57
спасибо большое очень все хорошо работает
39.
Александр, разработчик 14.10.2013 11:20
2 Равиль: как вы думаете, в Google дураки сидят? И у них, к вашему сведению, есть платные сервисы. Там, я думаю, можно попросить убрать. В интернете все меньше и меньше остается "бесплатного", пора к этому привыкать.
40.
Бодя 24.10.2013 17:11
Спасибо! Все работает! Только "настройка и предварительный осмотр ..." выдает ошибку.
41.
Александр, разработчик 24.10.2013 17:18
Попробовал. Ошибку не выдает. Браузер Firefox v.24.0. Хорошая новость! Google тестирует новые карты. Присоединяйтесь!
42.
Лена-картограф 20.11.2013 08:18
У меня тоже получилось. Спасибо.
43.
Евгений Sensei 24.11.2013 12:44
Спасибо за статью. Нужно ли код заключать в теги "noindex" и "nofollow", ведь там лишние ссылки на maps.google ?
44.
SiteRDA 24.12.2013 10:38
Ой спасибо!, причем показывает карту, импортированную из KML!
45.
Andrey 13.08.2014 07:47
Подскажите, как правильно удалить ,а еще луче отключить с главной страницы сайта http://www.realtyua.com.ua гугл карту?
46.
Александр, разработчик 13.08.2014 11:53
Я на такие вопросы уже отвечал. К сожалению, мир веб-разработки устроен так, что нужно точно знать как добавлена карта на ваш сайт. Он построен на Joomla!, а я не работаю с бесплатными движками. Сталкивался с Джумлой, но очень поверхностно.

Поэтому, простите, но ничем не могу помочь.
47.
Владимир 28.02.2015 19:31
Спасибо! Довольно доступно обьяснил, всё работает!)))
48.
Игорь 12.05.2015 13:10
коротко и по делу!правда сейчас немного подругому но кому надо найдут!СПАСИБО!
49.
Александр, веб-разработчик 12.05.2015 13:14
Игорь, спасибо. Я знаю, что уже новый вариант карты. Но за ними не угонишься. Яндекс тоже обновил свои Карты.
50.
Богомолова Людмила Григорьевна 10.03.2018 11:58
https://m.vk.com/id428511965

Добавление комментария

Имя:
Текст:
Введите цифры, изображенные на картинке
protect

Если вы хотите написать личное письмо- Обратная связь