вРаскрутка и SEO

Как вставить карту Яндекса на сайт — Примеры

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

Чтобы разместить фрагмент карты у себя на сайте, нужно заполнить пару полей в конструкторе [api.yandex.ru/maps].
Конструктор Яндекс карт
Предполагаю, что лучше на HTML страницу установить код статической схемы, со ссылкой на Яндекс.Карты, поскольку скрипт может барахлить на устройствах с медленным интернетом.
Конструктор Яндекс карт в виде изображения
Результат:

Самарский академический театр драмы им. М. Горького
<div style="text-align: center;"><a href="ссылка_на_Яндекс_Карты" target="_blank"><img src="адрес_из_конструктора" alt="название_компании"/></a></div>

Режим панорамы также можно добавить к себе на сайт
Как вставить панораму Яндекса на сайт
Результат (содержимое можно вертеть, если захватить его участок мышкой, переходить по улицам щёлкая по стрелкам):

Советую посмотреть это видео для вдохновения:

Добавить карту на сайт: две картинки рядом (HTML / CSS)

Можно возле карты поставить изображение организации. При уменьшении окна браузера картинки будут уменьшаться пропорционально.

Как добраться к Самарскому академическому театру драмы им. М. Горького Самарский академический театр драмы им. М. Горького

<table id="table1"><tr>
<td><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=242&height=300" alt="Как добраться к Самарскому академическому театру драмы им. М. Горького"/></td>
<td><img src="http://3.bp.blogspot.com/-KRDixkPlXaQ/U2PkCGBI_JI/AAAAAAAAEYc/gsI1e8ktw_E/s624/samara-dram-teatr.jpg" alt="Самарский академический театр драмы им. М. Горького"/></td>
</tr></table>

Но я считаю так: пользователь ищет организацию и ему в первую очередь нужно узнать как до неё добраться. Поэтому лучше, если он увидит достаточного размера карту, чем мелкую карту и мелкое рядом стоящее фото здания. При уменьшении экрана максимально долго будет оставаться правая часть фонового изображения.

Самарский академический театр драмы им. М. Горького

<figure id="figure-right"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=300&height=300" alt="Самарский академический театр драмы им. М. Горького"/></figure>

А здесь левая:

Самарский академический театр драмы им. М. Горького

<figure id="figure-left"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=3sVszGantEAe0y_VfKbY0bKRginTKWsi&width=300&height=300" alt="Самарский академический театр драмы им. М. Горького"/></figure>

Если нужно, чтобы фотография перемещалась на новую строку, когда две картинки не умещаются вместе на текущей?

Мама́ев курган на карте ЯндексаСкульптура «Родина-мать зовёт!»

<figure id="figure-down-right"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=DY8eBS0sa_ho7LNOXUBj9QjqBMiC8dA3&width=300&height=233" alt="Мама́ев курган на карте Яндекса"/><img src="http://1.bp.blogspot.com/-hmGBTV4UzwI/U2pcQDnKLtI/AAAAAAAAEYs/81ideAbrrPQ/s570/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»"/></figure>

И последнее, вставка карты поверх фото. Описание картинки будет находиться либо справа от изображения с адресом фирмы, либо под ним.

Мама́ев курган на карте ЯндексаСкульптура «Родина-мать зовёт!»
Скульптура «Родина-мать зовёт!»

<figure id="figure-down"><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=DY8eBS0sa_ho7LNOXUBj9QjqBMiC8dA3&amp;width=530&amp;height=358" alt="Мама́ев курган на карте Яндекса" id="izoaddress"><img src="http://4.bp.blogspot.com/-7f6hSStSMQw/U28c3-fWTSI/AAAAAAAAEZg/3KFey3SnKkA/s870/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»" id="izovid"><figcaption>Скульптура «Родина-мать зовёт!»</figcaption></figure>
источник: shpargalkablog.ru

Похожие посты