Как добавить карту Google на HTML MotoCMS сайт? Добавить карту на сайт


Как добавить Google карту на сайт

С помощью Google Карт вы можете размещать карты, маршруты проезда, результаты поиска, а также панорамы из Просмотра улиц на своем веб-сайте или в блоге.

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

Как получить код:

  1. Перейдите в Google Карты.
  2. Откройте карту или панораму из Просмотра улиц, которую нужно добавить на сайт.
  3. Нажмите на значок главного меню в левом верхнем углу экрана.
  4. Выберите Поделитесь с друзьями или получите код карты.
  5. В открывшемся окне перейдите на вкладку Код.
  6. Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога.

Примечание. В упрощенном режиме получить код карты нельзя.

Обратите внимание, что информация о пробках и некоторые другие данные могут быть не видны на добавленной карте.

В случае, если ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru, и вы хотите заменить уже имеющуюся карту, например, на странице контактов, то вам нужно зайти в панель управления сайтом, открыть раздел CMS > Страницы сайта, найти страницу «Контакты», зайти в ее редактирование, затем открыть расширенные настройки страницы (см. скриншот ниже) и в поле «Слайдер» вставить полученный в сервисе Google maps код карты вместо текущего.

Как вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), — они показаны стрелками на скриншоте. Вы можете установить оптимальные для вашего сайта значения (на ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением нужно просто удалить из кода. На скриншоте показана выделением часть кода, которую нужно удалить для установки ширины карты равной ширине сайта.

Источник статьи: Google справка — Как добавить карту на сайт или в блог.

pixlpark.ru

Как добавить карту Google на HTML MotoCMS сайт? – Moto Help Center

В связи с недавним обновлением Google API виджет "Google Maps" больше не работает должным образом, поэтому в дальнейшем его придется добавлять на страницу вручную при помощи HTML Widget. Для этого нужно выполнить следующие действия:

1) Прежде всего, нужно войти в свою учетную запись Google и создать себе карту вот тут https://www.google.com/maps/d/, нажав на кнопку "Создать карту".

2)  На открывшейся странице нужно заполнить поля "Название карты" и "Описание". После этого нажать "Сохранить".

3) Чтобы добавить маркер, Вам необходимо нажать на на значок маркера , а затем выбрать любую точку на карте. Или найдите нужное место, нажмите на зеленый маркер на карте, а затем выберите Добавить на карту.

4) После заполнения "Названия" и "Описания" для указанного места для внесения изменений нужно будет нажать кнопку "Сохранить". Подробнее о том как посмотреть, изменить и настроить собственную карту здесь.

5) По умолчанию все карты находятся в закрытом доступе. Это означает, что просматривать и редактировать карту может только ее владелец (то есть вы). Чтобы другие пользователи могли просматривать вашу карту, нажмите кнопку Поделиться на панели слева, далее Изменить, нажмите на круг рядом с фразой "Для всех в Интернете", а затем нажмите кнопку Сохранить.

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

7) Скопируйте HTML-код из открывшегося окна.

8) Далее необходимо разместить "HTML Widget" на странице в панели управления шаблоном и дважды кликнуть на ней мышкой.

9) Далее нужно выбрать слева в окне вариант "Blank HTML". В окне ввода кода справа вставить строку "HTML-код для добавления на веб-сайт" из пункта 7. После этого в коде нужно найти параметры "width" и "height" и в качестве значений устанавливаем 100% (это позволит заполнить равномерно весь HTML Widget картой). После этого нажимаем "ОК".

10) Нажимаем "Предпросмотр" и проверяем наличие карты на странице.

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

support.motocms.com

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

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

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

Почему именно ставить карту от Яндекса?

Ответ на этот вопрос должен найти каждый вебмастер, так как это сродни вероисповеданию. У меня, к примеру, был выбор между картами от Google, от Yandex и картами от 2GIS. Возможно выбор сервисов намного шире, но мне хватило рассмотрения этих трех. Можете полистать форум о компьютерном железе, может там есть какая-нибудь информация по этому вопросу.

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

Карты от 2GIS – это просто шикарные карты, но для доступа к их API необходимо написать официальную заявку, которую будут несколько дней мурыжить и в итоге так и не понятно – дадут возможность использования их или нет. У кого много времени или есть дотошный заказчик – велком в тех. поддержку 2GIS.

Я как всегда пошел по самому легкому пути и решил, что карты от российской компании Яндекс – это мое. После небольшого опыта их использования я понял, что не прогадал. Работать с ними очень удобно, хоть и громоздким получается код. Самое главное, что бесплатно и просить разрешения ни у кого не надо.

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

Все просто. Давайте по-порядку.

  1. Нужно зайти на сайт http://api.yandex.ru/maps/tools/constructor/ и зарегистрироваться. Эта общая регистрация для всех дополнительных сервисов, таких как Яндекс.Вебмасте, Яндекс.Директ и так далее. Если Вы уже зарегистрированы, то дополнительно делать ничего не нужно. Хотелось бы немного дополнить: если вы добавляете карты не для себя, а для заказчика, то будет честнее и проще вам в будущем создать новый аккаунт для заказчика.
  2. Далее в поиске ниже ищем нужный вам регион, ищем улицу. После того, как вы нажали найти, метка будет стоять на том здании, которое вам нужно. Если здание не найдено или не обозначено на карте, то можно просто подвинуть метку как надо. Жмем во всплывающем окне ОК и ставим свою метку. Можно как выделить некоторую область, так и просто поставить метку в виде точки. Добавляем текстовое описание и если нужно меняем стиль оформления.Как добавить карту от Яндекс на свой сайт?
  3. Далее переходим к 3 шагу Код для вставки и вводим доменное имя, где будет красоваться карта, ставим галку, что согласны с условиями размещения карты. Давим на Получить код карты.Как добавить карту от Яндекс на свой сайт?

Это все! Далее Вам будет предложено скопировать html-код на страницу своего сайта и лицезреть красивую карту с вашей меткой.

P.S. Для того, чтобы валидатор W3C не ругался на вставленную вами карту, необходимо все символы амперсанда – & заменить на XML-обозначение – &. Почему этого не делает сам Yandex, не понятно.

adminway.ru

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

Добавить Яндекс.Карту в сайт на Joomla Добрый день, уважаемые читатели! Решила я обратить сегодня Ваше внимание на очень интересную и в последнее время популярную возможность добавления карты местности на сайт. Конечно, многие сейчас подумают: “ Для чего это делать, ведь есть Яндекс.Карта и там можно все посмотреть”, но не стоит забывать про удобство посетителей сайта и стоит ли его перенаправлять на другой сайт, если возможно сгенерировать  данную карту на свой ресурс, который создали на joomla. И поэтому будем сейчас добавлять Яндекс.Карту на сайт с помощью компонента yandexmap.

Естественно, добавлять карту на все подряд сайты не стоит – в этом нет необходимости, а вот если тематика проекта – путешествия, агентства недвижимости или любого другого агентства, клиентам которого Вы хотите указать свое местоположение на карте города, то компонент yandexmap идеально подходит для воплощения задуманного. Но для этого нам необходимо скачать сам компонент и получить api-ключ, благодаря которому и будет генерироваться карта.

Установка компонента yandexmap

Итак, первым делом скачиваем компонент  yandexmap. Полученный архив распаковываем и получаем две .zipовских папки: com_yandexmap_1.2.0.zip и plg_yandexmaps_v2.0.zip. Это сам компонент и плагин, который обязателен к установке и теперь остается только их закачать на движок. Для этого заходим в административную панель нашего сайта на Joomla и выбираем Расширения – Установить\Удалить и на открывшейся странице выбираем тип закачки файлов на движок – “Закачать файл пакет”

установить компонент на joomla

Нажимаем на кнопку “Выберите файл”(стрелочка 1), в выпавшем окне выбираем место где лежит наш архив com_yandexmap_1.2.0.zip и затем закачиваем его, нажав на кнопку “Загрузить файл &Установить” (стрелочка 2). В итоге появляется окно с сообщением что компонент успешно установлен, а если мы зайдем во вкладку Компоненты, то увидим пункт Яндекс.Карты (стрелочка 1), нажав на который выпадает окно с пунктами настроек (стрелочка 2).

компонент яндекс.карта

Таким же образом устанавливаем и plg_yandexmaps_v2.0.zip

Для продолжения установки Яндекс.Карты на joomla нам необходимо включить установленный плагин, чтобы это осуществить проходим в административной панели в Расширения – Плагины. Открывается список установленных плагинов, в котором ищем строку Яндекс.Карты

плагин яндекс.карта

и активируем его.

Получение API — ключа карты Яндекс

Чтобы продолжить устанавливать Яндекс.Карту нам необходимо получить api – ключ к ней на сервисе http://api.yandex.ru/maps/jsapi/doc/dg/tasks/quick-start.xml. Данный ресурс предоставляет возможность сгенерировать карту на любом сайте, но это уже совсем другая история, так как меня интересует в данный момент получение ключа для сайта на joomla.

А для этого на открывшейся странице просто кликаю по ссылке “страницу получения API-ключа”

получение api ключа для яндекс.карта

и меня перебрасывает на страницу с формой его получения. Получить данный ключ можно только при наличии аккаунта в Яндекс, так как он у меня имеется то я просто прохожу процедуру авторизации, кликнув на ссылку “Авторизуйтесь” (стрелочка 1), если же у Вас нет аккаунта, то нажмите на ссылку “зарегистрируйтесь” (стрелочка 2)

получение api ключа для яндекс.карта

После того как мы успешно авторизуемся открывается страница с формой получения ключа, который будет привязан к конкретному сайту, поэтому указываем сначала адрес сайта, где хотим вставить Яндекс.Карту (стрелочка 1), затем принимаем пользовательское соглашение по использованию данного сервиса и только потом нажимаем на кнопку “Получить API-ключ” (стрелочка 2)

получение api ключа для яндекс.карта

И вот только после этого открывается страница с мои api –ключом, для генерации Яндекс.Карты, который я благополучно копирую.

Также на открывшейся странице приведен пример где необходимо разместить, но он для нас не важен, так как мы будем вставлять карту на сайта joomla с помощью компонента  yandexmaps.

Добавление Яндекс.Карты на joomla

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

получение api ключа для яндекс.карта

Откроется окно, где в строке “Yandex Maps API ключ” вставляем скопированный нами ранее ключ, а вот настройки пункта “Выводить на экран информацию о Yandex” зависит от ваших предпочтений, но в любой момент можно их изменить. Сохраняем произведенные изменения нажав на кнопку “Сохранить”

получение api ключа для яндекс.карта

Все ключ активировали, теперь осталось создать только карту, маркер и вставить Яндекс.Карту в статью.

Первоначально нам необходимо создать карту, для этого в панели управления компонентом кликаем по пункту “Карты” – “Новый”

создание новой карты

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

создание новой карты

Итак, рассмотрим основные настройки:

— Заголовок – здесь прописываем название нашей карты на кириллице

— Псевдоним – тот же заголовок только на латинице

— Ширина и Долгота – здесь прописываете координаты Вашего того места, которое хотим чтобы отражалось на карты. Для помощи нам дается кнопка “Установить координаты”, нажав на которую появится окно, где в верхней строке достаточно будет указать необходимый адрес и нажать на кнопку “Получить маршрут”

создание новой карты

И таким образом координаты у нас в настройках выставятся автоматически.

— Увеличение – здесь можно указать во сколько раз будет увеличиваться карта при клике мыши или движением колесика.

— Ширина и Высота карты – здесь указываем в пикселях размер карты, который исходит от возможностей страницы ее отражения. Я для свой установила 595 на 400

— Версия API Yandex – оставляем по умолчанию

— Опубликовать – здесь ставим галочку в положение “да”

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

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

создание новой карты

На приведенном выше скриншоте мы видим, что в графе «Заголовок» отразилось название созданной мною карты, в графе «Опубликовано» стоит зеленая галочка, которая показывает, что карта включена, id данной карты 1, а так же есть и графа «Код плагина», где прописано два варианта кода данной карты, это:

{yandexmaps view=map|id=1} — вставить карту на страницу или в контент сайта

или же в модальном окне {yandexmaps view=link|id=1|text=Map}

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

Теперь только осталось создать маркер для нашего адреса, чтобы это осуществить заходим в панели управления компонента yandexmaps в Маркеры – Новый

создание маркера для Яндекс.карты

Для начала следует прописать основные настройки маркера:

— Заголовок балуна – здесь указываем точный адрес

— Заголовок метки – чтобы не путаться прописываем тоже что и в первом поле

— Карта – здесь указываем для какой карты следует применить данный маркер

— Опубликовано – ставим галочку в положение “да”

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

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

karta

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

Такая карта может появиться и на Вашем сайте, которая поможет Вашим клиентам ориентироваться в городе.

На сим я заканчиваю, поставленная задача – добавить Яндекс.Карту на сайта joomla мною выполнена. Вам успехов в Ваших начинаниях и до новых встреч на lediseo.ru

Возможно Вам это будет интересно:

www.lediseo.ru