Все для начинающего вебмастера. Как добавить яндекс карту на сайт


Как добавить Яндекс карту на сайт? – Bloxy.ru

Добавим интерактивную Яндекс карту на сайт

  1. Переходим на Яндекс карты https://tech.yandex.ru/maps/tools/constructor/ и жмём "Создать новую карту"Я карты-1
  2. Вводим наш адрес и жмём "Сохранить и продолжить"Я карты-2
  3. Выбираем:
    • Интерактивная или статичная карта нужна
    • Растягивать по ширине или нет
  4. Жмём "Получить код карты" и копируем полученный кодЯ карты-3
  5. Добавляем HTML виджет, нажимаем "Редактировать" и вставляем туда скопированный код из шага 2 и нажимаем "Галочку". Если вы не хотите, чтобы от скролла изменялся масштаб карты вместо прокрутки самого сайта, в самом конце кода нужно заменить значение "scroll=true" на "scroll=false".Гугл карты-2Гугл карты-3
  6. HTML виджет станет зеленым, значит код вставился. В редакторе карты не будет видно, но на опубликованной странице всё будет работатьСнимок экрана 2016-04-22 в 1.27.57
  7. Выглядеть карта будет, например, так:Снимок экрана 2016-04-22 в 1.51.01

    Растягиваем карту на 100% по ширине секции и делаем её без белой рамки

Уберите внешние отступы у красной колонки (капелька), секции (капелька) и поставьте растягивание на 100% ширины у секции (карандашик)

Гугл карты-4

Растягивание

Карта будет выглядеть на опубликованной странице так:Снимок экрана 2016-04-22 в 1.51.36

Делаем нашу геометку красивой

Жмём на метку и открывается окно настройки геометки.Карта-1

Здесь мы можем изменить:

  • Описание геометки
  • Цвет геометки
  • Вид геометки
  • Вставить внутрь геометки иконку

bloxy.ru

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

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

Любое учреждение или предприятие  (офис, склад, магазин и пр.) имеют свой адрес. На сайте этот адрес можно не только УКАЗАТЬ, но и ПОКАЗАТЬ. Для этого достаточно использовать Яндекс карту. С ее помощью можно посмотреть точное местонахождение того или иного учреждения, а также выбрать удобный маршрут.

В этой статье я расскажу, как добавить Яндекс карту на сайт.

Добавляем Яндекс карту на сайт

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

Для начала нужно создать карту. Для этого перейдите в конструктор карт:

https://api.yandex.ru/maps/tools/constructor/

Вот некоторые возможности Яндекс карты, которые я использую:

Добавляем Яндекс карту на сайт1. Поиск. Поиск конкретного города и улицы.

2. Здесь можно создать точку с описанием, цветом и нумерацией.

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

4. Здесь вы сможете выбрать 4 варианта отображения карты на сайте:

- схема, - спутник, - гибрид, - народная карта.

5. Этот инструмент позволяет изменять размер карты, перетаскивая метки. Под картой вы можете увидеть размер в px (пикселях).

Добавляем Яндекс карту на сайт

6. Когда Яндекс карта оформлена, и все необходимые маршруты и метки указаны, нужно назвать карту. Нажмите на кнопку «Сохранить и получить код»:

Добавляем Яндекс карту на сайт

7. Появиться код.

Добавляем Яндекс карту на сайтСкопируйте его и установите в любое место, между тегами <body></body>, где хотите, чтобы отображалась карта.

Выше описанная инструкция подходит для обычных сайтов, сделанных на HTML, PHP.

Для WordPress можно установить этот код в файлах темы (шаблона) «single.php», «page.php», «sidebar.php», «footer.php».

Либо этот код можно вставить в виджет. Перейдите в админке «Внешний вид» => «Виджеты» и перетащите в нужное место виджет «Текст (Произвольный текст или HTML-код)». Вставьте туда весь код.

Также в WordPress код можно установить на самих страницах или записях. Только, когда будете вставлять код, редактор должен находиться в режиме «Текст», а не в «Визуально».

Добавляем Яндекс карту на сайт

На сегодня это все!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: wordpress, без плагинов, Вебмастеру, для сайта

bloggood.ru

Как добавить Яндекс карту на сайт быстро и бесплатно

Как добавить Яндекс карту на сайт быстро и бесплатно

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

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

Регистрируемся на Яндексе и получаем ключ

Возможность установки карты на сайт возможна при выполнение двух обязательных пунктов – регистрация в системе и получения ключа. Для прохождения регистрации нужно перейти на сайт http://api.yandex.ru/maps/ и там зарегистрироваться, то есть авторизоваться с помощью учетной записи, которая уже существует на Яндексе. Если таковой нет, то предварительно нужно зарегистрироваться (данный процесс занимает несколько минут).

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

Нужный результат предоставляется на последующей странице. Здесь указывается тот самый API-ключ, который также служит уникальным идентификатором. И, как всегда, Яндекс уже составил нужный html-код. Достаточно просто скопировать его в нужное место на сайте, и карта появиться.

Создаем собственную карту

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

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

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

Затем можно выбрать цвет маркера. После ввода названия и выбора цвета нужно нажать кнопку «ОК». Появляется возможность выбора масштаба и типа карты. Есть два типа: интерактивный – пользователь может перемещаться по карте и масштабировать ее, статический – карта предоставляется в неизменном виде.

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

Решение для WordPress

Для добавления карты от Яндекса на сайт, сделанный на движке WordPress, можно использовать официальный плагин, который можно скачать на сайте движка. Название плагина говорит сразу ясно и понятно – Yandex Maps for WordPress.

Если карту на сайт нужно добавит только один раз, то по сути плагин является бесполезным. Так как для добавления карты все равно нужно получать API-ключ. А после получения ключа можно быстро сконструировать нужную карту, чтобы не перегружать сайт плагинами.

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

searchtimes.ru