Как разместить карту от Яндекс или Google на сайте? Как вставить карту яндекс на сайт


Как добавить карту Яндекса в узкую колонку сайта: инструкция для пользователей «Нубекса»

Не всегда пользователю достаточно знать адрес компании, иногда ему нужно наглядно показать расположение организации и объяснить, как до нее добраться. Сделать это можно, разместив на сайте интерактивную карту. Например, в виде виджета: тогда карта будет отображаться в узкой колонке, и пользователи смогут воспользоваться ею, на какой бы странице сайта они ни оказались.

Чтобы добавить интерактивную карту в узкую колонку сайта, нужно создать в ней виджет «Карты Яндекса». Для этого откройте нужную колонку в разделе «Виджеты», кликните по раскрывающемуся меню и выберите пункт «Создать блок Карты Яндекса».

Откроется страница редактирования виджета. Задайте общие параметры:

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

Обратите внимание: в мобильной версии сайта виджет «Карты Яндекса» не отображается.

Теперь к самой карте. На ней необходимо «установить Вашу точку», то есть отметить на карте то место, куда Вы хотите проводить пользователя (например, главный офис организации). Для этого просто кликните по карте в нужном месте. Если Вы немного промахнулись и точка установилась не там, где надо, просто перетащите ее, зажав левую кнопку мыши. Если сильно промахнулись, и точка вообще «уехала», Вы можете ее удалить и установить заново.

В поле «URL ссылка с карты на подробное описание» можно ввести адрес страницы, на которую перейдет пользователь, клинув по виджету с картой. Это может быть, например, страница Вашего сайта с подробным описанием проезда, или полноэкранная версия Яндекс.Карт с отметкой Вашей организации, где пользователь сможет проложить маршрут.

Чтобы получить ссылку на полную версию карты, нажмите кнопку «Как добраться» в нижней части интерактивного экрана: в новой вкладке браузера откроется страница «Яндекс.Карты».

На странице Яндекс.Карты введите адрес Вашей организации в строку поиска: на карте установится точная отметка. Нажмите кнопку «Поделиться» внизу экрана и скопируйте ссылку на карту.

Вернитесь на страницу редактирования виджета и вставьте полученную ссылку в поле «URL ссылка с карты на подробное описание». С помощью галочки можно настроить, откроется ли карта у пользователя в новом окне или в текущем.

Не забудьте сохранить изменения, и виджет с картой Яндекса будет опубликован в выбранной колонке Вашего сайта.

nubex.ru

Как вставить карту Яндекс на сайт?

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

Весь процесс у вас займет всего лишь несколько минут. Для начала вам нужно перейти по ссылке http://api.yandex.ru/maps/tools/constructor/. Основное, что от вас требуется на данной странице, это ввести адрес и название карты, а затем нажать на кнопку «Сохранить и получить код». Название у карты может быть абсолютно любым.

Как вставить карту Яндекс на сайт

В принципе, готовый код карты Яндекс у вас уже есть, его можно смело вставлять на сайт. Единственно, что хотелось бы еще отметить, это инструменты: установка точек, рисование линий, рисование многоугольников, изменение размеров карты. При помощи них на карте можно нарисовать маршрут, отметить наиболее важные детали точками, выделить необходимые объекты многоугольниками, изменить размеры карты. Для большего удобства у каждого инструмента есть поддержка различных цветов, а также возможность ввода описаний. Таким образом, ваша схема проезда получится очень информативной и легкой для восприятия. Также не забудьте задать требуемый масштаб своей карте при помощи шкалы -/+ слева, именно в таком виде она будет доступна на вашем сайте.

После того как вы зададите все необходимые нюансы, нажмите «Сохранить и получить код». Полученный код следует скопировать и вставить на сайт — чаще всего его вставляют прямо на страницу с информацией о контактах, в редких случаях потребуется редактирование шаблона.

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

yaroslaff.su

Как вставить интерактивную карту Яндекс на свой сайт

Как добавить интерактивную карту Яндекс на свой сайт - пошаговое руководство

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

Как быстро добавить карту

В поле “Найти место на карте” напишите название населённого пункта или сразу точный адрес и нажмите “Найти”.

Интерактивная карта Яндекс - выбор населённого пункта

После этого на карте появится метка. Если метка появилась не там, где нужно, её можно передвинуть мышкой в нужное место.

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

Кликните по метке, если нужно изменить её цвет и добавить описание.

Как перекрасить метку на карте и добавить описание

Затем с помощью шкалы приближения-удаления выберите масштаб карты, при котором пользователю будет легче всего понять что и где находится.

Изменение масштаба карты

После того, как карта отредактирована, нажмите кнопку "Сохранить и получить код".

Сохранение карты Яндекс

По умолчанию появляется код для вставки интерактивной карты. Если вам нужна просто неподвижная картинка карты, нажмите на кнопку "Статическая".

Получение кода интерактивной и статической карты Яндекс

Теперь осталось только скопировать весь полученный код и вставить его в нужную часть страницы с помощью html-редактора.

Если сайт создан на нашем сервисе бесплатных сайтов - вставьте код в специальное поле на странице “Контакты”

Вставка кода карты в раздел Контакты бесплатного сайта сервиса Фреш

или в поле для вставки произвольного кода, если карту нужно добавить на другую страницу.

Вставка произвольного кода на бесплатный сайт - сервис Фреш

Готово! После сохранения простая интерактивная карта Яндекс добавится на ваш сайт.

Если вам нужно больше функций - ниже кратко описаны типы карт и их особенности, а также рассмотрены специальные инструменты - рисование линий и многоугольников, добавление меток с номерами и изменение размера карты.

Типы карт

  • схема - стандартная карта схема;
  • спутник - карта, составленная из фотографий со спутника;
  • гибрид - на карту со спутника наложены названия районов, улиц, номера домов и т.п.
  • народная карта - самая подробная карта-схема, которую составляют пользователи. На ней отмечаются объекты, которых нет на стандартных схемах - магазины, аптеки, новые здания и т.п.

Обычно в картах для сайта используется карта “Схема”, но в некоторых случаях лучше остановиться на другом типе карт. Вот пара советов:

1. Используйте “Гибрид” схемы города и фотографий со спутника, чтобы придать карте реалистичности и дать посетителям дополнительные ориентиры.

Гибрид схемы с фотографий со спутника

Например, эту карту можно было пояснить так: “Наш офис находится на углу улиц Ленинградской и Полины Осипенко напротив парка Авиастроителей”. Клиенту понадобились бы некоторые усилия, чтобы вспомнить где находятся эти улицы, а ориентир - парк Авиастроителей - поможет сообразить гораздо быстрее.

2. Используйте “Народную карту”, если по соседству находятся значимые и узнаваемые объекты - здания администрации, музеи, кинотеатры, торговые комплексы и т.д.

Народная карта Яндекса показывает инфраструктуру района

Эту карту можно было бы пояснить следующей фразой: “Наш автосервис находится напротив торгового комплекса “Красная площадь” сразу за заправкой “Роснефти”.

Если в этом случае вместо народной карты использовать “Схему” или “Гибрид”, то клиенту автосервиса сначала придётся разгадать, где здесь заправка и где торговый центр.

Метка на интерактивных картах Яндекса - схема и гибрид

Специальные инструменты

  • установка точек - главный инструмент, ставит на карту метку нужного цвета, добавляет к ней описание, при необходимости - указывает номер от 1 до 99 внутри метки. 

Установка точек на интерактивную карту Яндекс

Нумерация полезна, когда на одной карте, к примеру, несколько филиалов.

Номер метки на карте Яндекс

  • рисование линий - позволяет нарисовать на карте самый кривой маршрут, добавить к нему описание, настроить цвет, толщину и прозрачность линий. Особо полезен когда “вход со двора через проход между домами”.

Рисование линий на карте для сайта Яндекс

  • рисование многоугольников - используется в особых случаях, позволяет рисовать неправильные многоугольники, задавать им цвет, прозрачность толщину линий и добавлять описание. Полезно, когда необходимо обозначить на карте территорию, например, место под строительство или промышленную базу.

Рисование сложных многоугольников на карте для сайта

  • изменение размеров карты - позволяет “потянуть” карту по ширине и высоте, чтобы она идеально “вписалась” в сайт.
  • Изменение размера карты Яндекс

На этом всё. Полезных инструментов и понятных карт!

Marina Ovcharenko

site-fresh.ru

Как вставить Яндекс карту на сайт WordPress (Видео Уроки WordPress )

Текстовый транскрипт видео:

Здравствуйте, в эфире Дмитрий Татаринов, автор блога http://www.azoogle.ru/!

Для того чтобы создать и добавить Яндекс-карту к себе на сайт, необходимо перейти в конструктор карт Яндекса, ввести необходимый адрес, убедиться, что он правильный, и нажать кнопку «Найти».

После того, как вы определи адрес, вы можете расставить дополнительные опознавательные знаки. Например, точки и подписи. К примеру, если вы хотите сделать, отметить какие-то объекты, то вы можете задать цвет, вставить произвольную подпись, отметить определенный маршрут с помощью рисования линий или при желании отметить отдельные объекты при помощи инструмента «Многоугольник». После того, как вы отметили объект, вы можете также расставить подписи и метки, выбрать различные цвета.

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

Если вы хотите вставить Яндекс-карту на WordPress сайт, то здесь есть несколько особенностей, которые надо учитывать.

По умолчанию визуальный редактор WordPress не разрешает использование тегов «скрипт», т.е. не разрешает использования java скрипта напрямую в визуальном редакторе. Т.е. если вы хотите использовать интерактивную карту, то вы можете вставить её в режиме текстового редактора и нажать кнопку «Опубликовать». В данном случае карта отобразится. Но если вы переключитесь на визуальный редактор, то WordPress автоматически уберет запрещенные теги и в следующий раз, когда вы переключитесь на тестовую вкладку, то вы не увидите здесь кода, который вы используете. Поэтому из этой ситуации есть несколько выходов.

Первый – это можно воспользоваться статичной картой. В данном случае карта будет отображаться как рисунок, т.е. вы можете использовать её, вставив её на вкладке текстового редактора. Если вы переключитесь на визуальный, то она будет отображаться как рисунок. Все будет работать, и WordPress не будет убирать код.

Второй — если же вы хотите воспользоваться интерактивной картой и в тоже самое время, чтобы каждый раз не переключаться и не вставлять заново этот код, вы можете воспользоваться плагином «Custom Fields Shortcode».

«Custom Fields Shortcode» позволяет добавить фрагмент кода в пользовательское поле и потом использовать его в любом месте записи. Если по умолчанию у вас панель пользовательских полей не видна, перейдите в «Настройки экрана» и поставьте галочку «Произвольные поля». После этого у вас появится панель «Произвольных полей», где вы можете добавить.

Т.е. если мы сейчас хотим добавить, к примеру, пользовательское поле «Яндекс-карта» и в значении этого пользовательского поля указать, что мы хотим, чтобы при отображении его на сайте включался такой код с картой, т.е. здесь мы можем отредактировать параметры, к примеру, увеличить ширину карты до 640 пикселей при высоте в 450 пиксилей, т.е. если мы сейчас добавим в пользовательском поле Яндекс-карту, то его значение будет непосредственно наша интерактивная карта, т.е. сейчас я добавляю.

Чтобы использовать это значение произвольного поля в редакторе, мне нужно заключить его в шорткод которое выглядит вот так:

[cf][/cf]

, т.е. в custom fields, и внутри написать то поле, которое я хочу использовать. Т.е. в данном случае, если хочу использовать карту «Yandex Map». Т.е. теперь визуальный редактор воспринимает этот код как shortcode, он разрешен и он не будет убирать ваше значение, которое вы туда добавили. Но при отображении, если мы нажмем кнопку «Обновить», на странице будет выводиться значение произвольного поля, что в данном случае будет отображаться как интерактивная карта Яндекс, которую пользователь может точно также использовать, как если бы он находился непосредственно на сайте Яндекс.

Спасибо, что вы посмотрели это видео, мне было приятного его для вас делать. Буду вам благодарен, если вы поделитесь им в социальных сетях. Ставьте палец вверх и подписывайтесь на новые видео. Если у вас возникли вопросы или вам нужна помощь, перейдите по ссылке в описании этого видео и оставьте комментарий, используя форму внизу страницы.

Если у вас возникли проблемы с просмотром – вы можете посмотреть видео «Уроки WordPress Как вставить Яндекс карту на сайт WordPress» на YouTube.

www.azoogle.ru

Как разместить карту от Яндекс или Google на сайте?

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

Для получения кода карты от Google:

  1. Зайдите на сайт Google maps.
  2. Используя поисковую строку, найдите нужное местоположение на карте.

  3. Нажмите на пиктограмму шестеренки в правом нижнем углу экрана и выберите "Поделитесь с друзьями или получите код карты"

  4. На вкладке "код" мы можем скопировать код созданной вами карты, с расположением которое вы искали.

Для получения кода карты от Яндекса:

  1. Зайдите на сайт Яндекс.Карты.
  2. Используя поисковую строку, введите нужное местоположение и нажмите "найти". Из предложенных вариантов выберете тот, который вам больше всего подошел.

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

  4. Дальше вам нужно получить сам код карты, если вы вошли в систему вы сможете сохранить карту у себя в аккаунте. Для этого вам нужно придумать название карты, прочесть пользовательское соглашение, и если оно вас устроило нажать "Сохранить и получить код" (код карты можно получить, даже без аккаунта Яндекса)

  5. Далее вы вбираете один из двух видов представление карты, "статическая" или "интерактивная". И копируете сам код.

Как вставить код карты на сайт?

  1. На странице, на которой вы хотите разместить карту, нужно вставить блок для html-кодов. Он 4-й слева на панели управления, при редактировании страницы.

  2. Вот так выглядят заполнение блоки для обеих сервисов:

  3. По умолчанию ширина карты 600 пикселей, но мы рекомендуем установить значение width равным 876 пикселям (значение меняется в коде карты, который вы уже вставили на Базиум). Так карты будут смотреться намного круче.

bazium.ru