Jump to content
  • 0
Sign in to follow this  
Евгений Зубов

Как вставить (добавить) карты от Яндекса?

Question

Всем привет!

Очень часто в сообществе звучит вопрос о том, как добавить или вставить карты от Яндекса на свой сайт, сделанный в Adobe Muse CC?! Поэтому я решил написать максимально подробную статью-инструкцию в картинках, которая решит этот вопрос раз и навсегда. Кроме этого я опишу то, как изменить размер карты. Все вопросы по этой теме задавайте ниже. Начнем!

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0

Мы не только вставим (добавим) карту на сайт, но и займемся изменением размера карты. Очень часто карты используют для того, чтобы посетители могли найти офис компании на карте, для этого принято ставить на карте указатель и уже потом размещать карту на сайте. Начнем с установки точки.
 
Вставка Яндекс.Карт в сайт на Adobe Muse CC:

    [*]В своей работе мы будем использовать специально созданный Конструктор Яндекс.Карты, Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. и переходим на сервис. Обращаем внимание на сам конструктор:

    Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

    Сейчас вы можете настроить параметры отображения карты. Например, поменять схематичное отображение на спутниковые снимки. Для примера возьмем город Тольятти, его центральный район.
      [*]Теперь создаем новую точку, используя инструмент Установка точек, который можно найти в панели Инструменты:

    Размещенное изображение

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

    Размещенное изображение

    Задаем настройки для точки, например, так как на картинке. На этом настройка точки закончена. Обратите внимание на то, что вы можете установить практически бесконечное количество точек, но, с практической точки зрения, более 10 точек сильно затруднит понимание для пользователей. Кроме точек  еще можно проложить маршрут, по согласно которому можно доехать до вашего офиса от ближайшего метро. Если настройка точки закончена, жмите кнопку ОК. Установленная точка, скорее всего, будет выглядеть так:

    Размещенное изображение
      [*]Отмотаем страницу чуть ниже и найдем желтую кнопку Сохранить и получить код, по ней мы и щелкаем. Конструктор карт немного задумается и сгенерирует для вас код (выделен красным цветом):

    Размещенное изображение

    Обратите внимание на то, что у вас есть выбор режима карты, либо карта Интерактивная (то есть, у посетителей вашего сайта будет возможность перемещать и масштабировать карту), либо Статическая (то есть, отображается обычной картинкой, которую нельзя двигать). Выберите нужный вам режим отображения. Я выбрал Интерактивную карту, что лучше для посетителей, но увеличивает вес и время загрузки сайта.
      [*]Выделите весь сгенерированный код (выделенный на картинке ранее красным цветом) и скопируйте в буфер, используя клавиши Ctrl+C, либо используя контекстное меню (щелчок правой кнопкой мыши по выделенному тексту и выбрать пункт Копировать). Для меня конструктор сгенерировал такой код:
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=uTJBRhtHQUFU2mrlsKac7lkSDVsjjcNi&width=600&height=450"></script>
[*]Перейдите в создаваемый вами сайт в Adobe Muse CC. В верхней части экрана, в главном меню, найдите слово Объект и выберете в нем пункт Вставить HTML, вот поясняющая картинка:

Размещенное изображение
  [*]В появившемся окне вставьте ранее скопированный код. Для этого сотрите надпись Вставьте здесь код HTML и прямо в том же месте нажмите Ctrl+V, должно получиться такое:

Размещенное изображение

Нажмите ОК.
  [*]В произвольном месте вашего Muse сайта появится вожделенная карта с уже установленной на ней точкой. Выглядеть это будет так:

Размещенное изображение
  [*]Осталось перетащить карту в нужно место на вашем сайте и наслаждаться результатом!

 

Share this post


Link to post
Share on other sites

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

Теперь попробуем немного изменить сгенерированный код и изменить размер карты для сайта. Если вы попытаетесь изменить размер прямо в окне Adobe Muse, то у вас ничего не получится, потому что размер карты жестко прописан в коде.
 
Как изменить размер Яндекс.Карты на сайте в Adobe Muse CC?

  1. Вспомним код, который ранее нам сгенерировал конструктор Яндекс.Карты:
    <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=uTJBRhtHQUFU2mrlsKac7lkSDVsjjcNi&width=600&height=450"></script>
  2. В этом коде мы можем легко изменить размер карты. Часть кода отвечающая за размер карты:
    <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=uTJBRhtHQUFU2mrlsKac7lkSDVsjjcNi&width=600&height=450"></script>
    Где &width - это ширина карты в пикселях, а &height - это высота карты в пикселях. Достаточно прописать другие значения этих параметров, и карта сразу изменит свой размер, даже если размер фрейма в Adobe Muse был меньше, чем новые размеры карты.
  3. Если мы хотим вставить карту шириной в 1000 пикселей и высотой в 500 пикселей, то HTML код будет выглядеть так:
    <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=uTJBRhtHQUFU2mrlsKac7lkSDVsjjcNi&width=1000&height=500"></script>
  4. Таким образом, можно без труда изменить размер любой вставленной карты от Яндекса.

Share this post


Link to post
Share on other sites
  • 0
senator    1

спасибо! весьма актуально и по делу))

а как быть если у меня в окне кода HTML уже есть код?? (я код от таймера туда вставлял)

спасибо заранее

Share this post


Link to post
Share on other sites
  • 0

спасибо! весьма актуально и по делу))

а как быть если у меня в окне кода HTML уже есть код?? (я код от таймера туда вставлял)

спасибо заранее

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

Share this post


Link to post
Share on other sites
  • 0

Как растянуть карту по всей ширине страницы??? 

Изменения размера карты подробно описано в Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке., вам лишь нужно указать значение параметры &width в процентах. Алгоритм действий действий для того, чтобы карта была растянута на всю ширину:

    [*]Вставляете код карты в ваш Muse сайт.

    [*]Изменяете значение параметра &widht на 100%, пример кода:

<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=uTJBRhtHQUFU2mrlsKac7lkSDVsjjcNi&width=100%&height=450"></script>

[*]

Теперь нужно прямо в Muse полностью растянуть карту от одного края рабочей области до другого (до появления красных ограничителей).

Вот и все  Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./default_smile.png" alt=":)">  Теперь размер карты всегда будет равен 100% от размера фрейма, в котором она находится, а сам фрейм всегда имеет ширину, равную размеру окна браузера.

Share this post


Link to post
Share on other sites
  • 0
Guest Гость   
Guest Гость

Спасибо, установи, все работает! Такой вопрос, не отображается если просматривать с ipad  и iphone! Что можно сделать?

Share this post


Link to post
Share on other sites
  • 0

Спасибо, установи, все работает! Такой вопрос, не отображается если просматривать с ipad  и iphone! Что можно сделать?

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

Share this post


Link to post
Share on other sites
  • 0

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.   вот сайт! попробуйте посмотреть с планшета, карт нет!

Share this post


Link to post
Share on other sites
  • 0

я не делал отдельно для планшета, только для компьютера

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

Share this post


Link to post
Share on other sites
  • 0

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

так а почему у Вас открывается с планшета?

Share this post


Link to post
Share on other sites
  • 0
так а почему у Вас открывается с планшета?

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

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...