09 апреля 2012      1656      11

Добавляем на веб — страницу карту с сайта Google Maps

karti

Довольно часто требуется добавить на веб-страницу не изображение или целую галерею изображений, а карту с сайта Google Maps или Яндекс.Карты.

Конечно, можно пойти на соответствующий сайт, сделать копию соответствующего фрагмента карты (комбинацией Alt-Print Screen), вставить эту копию в каком-нибудь графическом редакторе, отрезать лишнее и сохранить. Изображение карты можно будет и доработать в том же самом редакторе, например вычертить маршрут: как к нам доехать на городском транспорте и как проехать на машине. Останется только закачать картинку на сайт и вставить на соответствующую веб-страницу.

Но такую «плоскую» карту посетитель вашего сайта не сможет увеличить или уменьшить, чтобы получше изучить близлежащие улицы, или, наоборот, разобраться, как ему доехать до этого места. А между тем есть совсем несложные способы добавить на страницу полноценную карту — как некий кусочек настоящего Google Maps или Яндекс.Карт.

Самый простой и удобный способ предоставляет нам сайт Google Maps. Идете на сайт, вводите в строке поиска город, улицу и номер дома или название организации, учреждения. Получаете карту нужного вам участка земной поверхности. Потом щелкаете в верхнем правом углу карты по кнопке Ссылка и видите табличку с двумя строчками.

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

А во второй строке находится код, который можно  будет напрямую вставить на веб-страницу. Перейдете во вторую строку (нажав клавишу  Tab), скопируете адрес (Ctrl-C), перейдете страницу редактора страниц или записей и там вставите скопированное (Ctrl-V). Вот все! Если вы пустите просмотр создаваемой странички, в указанном месте увидите карту, причем карту интерактивную — с возможностью увеличивать и уменьшать масштаб, смотреть соседние участки, переходить от режима карты к режиму спутниковой фотографии. В код веб-страницы будет вставлен довольно длинный фрагмент, особую длину и особую запутанность которому придают невероятно сложные адреса страниц на Google Maps.
Вот такой код: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»http://maps.google.ru/maps?hl=ru&amp;ie=UTF8&amp;ll=55.354135,40.297852&amp;spn=27.799633,53.349609&amp;t=m&amp;z=4&amp;output=embed»></iframe><br /><small><a href=»http://maps.google.ru/maps?hl=ru&amp;ie=UTF8&amp;ll=55.354135,40.297852&amp;spn=27.799633,53.349609&amp;t=m&amp;z=4&amp;source=embed» style=»color:#0000FF;text-align:left»>Просмотреть увеличенную карту</a></small>

Читайте на сайте:  Письмо Генсеку ЦК КПСС М.С. Горбачёву от Стремоухова Г.Д.

Если же адреса убрать, останется  совсем мало кода — что-то вот такое: <iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight: marginwidth=»0″ src=»aflpec страницы» iframexbr /xsmallxa href=»адрес полноразмерной карты»>Просмотреть увеличенную карту</ax></small>

В коде несколько HTML-тегов,  которые могут оказаться нам полезными.

Так, в теге <iframe> задаются параметры блока, в котором помещается изображение карты. Можно изменить размеры блока, задав другое  значение параметров height (высота) и width (ширина), увеличить отступы сверху-снизу (marginheight) и по бокам (marginwidth).

Если вместо scrolling=»no» написать scroling=»yes», то у блока появится полоска прокрутки («лифт»).

Тег br (break — обрыв) задает обрыв строки: последующее содержимое странички будет показано с новой строки.

А далее идет ссылка (тег а) на страницу сайта Google Maps с полноразмерной картой, взятые в контейнер <small>…</small> (уменьшенный шрифт).

У карт Яндекса такого простого способа нет. Тут вам выдадут только адрес данной карты или обычную ссылку. Чтобы добавить на сайт интерактивную карту, вам предложат сначала зарегистрироваться и авторизоваться, получить некий API-ключ. Зато потом вам помогут проложить маршрут, покажут предварительный результат и выдадут длинный код, который вы сможете вставить на своём сайте.

Обсуждение: 11 комментариев
  1. Спасибо за информацию.Искала эту карту у вас на сайте, не нашла. А где можно посмотреть как она будет выглядеть?

    Ответить
    1. admin:

      Марина, у себя на сайте я карту не устанавливал. Посмотреть как она выглядит можно здесь:https://maps.google.ru/

      Ответить
  2. Обязательно воспользуюсь вашими советами!

    Ответить
  3. Спасибо за интересную и содержательную информацию. Удачи Вам! Заходите в гости!

    Ответить
  4. спасибо за полезную статью!

    Ответить
  5. Как славно, думаю, что и эта информация пригодится когда-нибудь! Буду знать, что здесь есть!!!

    Ответить
  6. Сергей:

    Сейчас попробую это сделать, по моему интересная вещь.

    Ответить
  7. Поздравляю Вас со светлым Праздником Воскресения Христова! Желаю радости, добра, любви и гармонии в этот чудесный день!
    ХРИСТОС ВОСКРЕСЕ!

    Ответить
  8. Спасибо за совет. Карты пока не ставила, но на будущее пригодиться.

    Ответить
  9. Петр:

    Здравствуйте, Владимир! Вы выдаёте полезную информацию, которую приходится добывать неделями. А тут сразу, да ещё с ценными пояснениями. Благодарю Вас за превосходные комментарии

    Ответить
    1. admin:

      Спасибо!!!

      Ответить

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Архивы публикаций статей
Популярные записи
Метки
ГСК (8) КПК (6) КПК "Семейный Капитал" (9) Кооператив (21) Кредитной кооперации (4) Потребительская кооперация (35) Потребительские кооперативы (33) России (57) СССР (6) США (6) Стремоухов Г.Д (7) артели (8) артель (5) гаражные кооперативы (7) жилищно-строительные кооперативы (7) жилищные кооперативы (11) кооператива (8) кооперативах (4) кооперативного движения (11) кооперативное движение (18) кооперативные принципы (8) кооперативов (41) кооперативы (180) кооперации (40) кооперацию (5) кооперация (44) корпорации (4) кредитная кооперация (4) кредитные кооперативы (11) кредитный кооператив (11) кредитный потребительский кооператив (7) о кооперации (4) пайщики (17) пайщики КПК "Семейный капитал" (6) потребительские общества (11) потребительский кооператив (9) потребительских кооперативов (13) потребительское общество (6) потребительской кооперации (18) производственных кооперативов (4) сельская кооперация (6) сельскохозяйственная кооперация (6) сельскохозяйственной кооперации (4) сельскохозяйственные кооперативы (9) сельскохозяйственные потребительские кооперативы (13)
Поделитесь с друзьями в социальных сетях

© 2019 Кооперативы против бедности · Копирование материалов сайта без разрешения запрещено
Дизайн и поддержка: GoodwinPress.ru