Как сделать Google карту на сайт?

Как вставить на сайт Google-карту #50902

Необходимо пройти по ссылке http://maps.google.ru/maps и ввести адрес месторасположения в графу поиска.

Затем нажать на кнопку «Поделиться».

В открывшеся окне перейдите к вкладке «Встраивание карт».

Далее необходимо выбрать подходящий размер карты.

Затем из нажать на кнопку «Копировать HTML».

Зайдите в редактор страницы и нажмите на кнопку «Редактировать HTML-код».

• Например, если Вы хотите разместить карту на отдельной странице, просто перейдите к редактированию нужной текстовой страницы и в текстовом редакторе данной страницы нажмите на кнопку «HTML» (см. скриншот ниже). Также Вы можете разместить карту в общих блоках.

Разместите код карты ниже всего кода страницы и нажмите «Обновить» и «Сохранить изменения».

help.megagroup.ru

Карты Google Maps — вставка и оформление (стилизация) карт на свой сайт

Всем привет! Сегодня мы научимся не только устанавливать карту Google Maps на свой сайт (любую html страницу), но и стилизовать карты Google Maps — изменять цвета карты, а также добавлять описание к маркеру карты Google Maps, изменять вид (изображение) маркера и добавлять к нему свое описание. Поехали!)

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

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

На странице создаем элемент

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

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

2. Карта Google Maps Api — определяем место и устанавливаем маркер

2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18 .

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

Теперь у нас есть карта с маркером

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

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

Первый параметр метода addListener — это объект, для которого добавляется событие, в нашем случае marker . Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

Более подробно про маркер и возможности работы с ним рекомендую посмотреть в документации.

2.3 Установка собственной иконки для маркера в Google Maps

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

В описание переменной с маркером, добавлю иконку.

Про более сложные значки — можно посмотреть в документации.

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Я выбрал стиль карты который называется Blue water. На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

Теперь наша карта выглядит вот так:

4. Информационные окна

Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит здесь. Если вкратце, то чтобы добавить инфо окно необходимо:

1. Создать само окно и контент внутри него
2. Сделать так чтобы оно появлялось по клику на маркер.

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна:

4.2 Создадим инфо-окно

4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно

Теперь карта с инфо-окном выглядит следующим образом:

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

Готовая карта

Готовую получившуюся карту и код можно посмотреть ниже или на codepen.

See the Pen Google Map by Yurij (@rightblog) on CodePen.18493

rightblog.ru

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

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

Добавить интерактивную карту на свой сайт позволяет, например, всемирно известная поисковая система Google. Сделать это можно с помощью бесплатного сервиса Google Maps.

Шаг 1. Получить код для установки карты Google на сайте

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

Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.

В открывшемся списке меню выберите пункт «Ссылка/код».

В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.

Шаг 2. Как вставить код карты 2gis на сайт

Итак, код получен, осталось только разместить его на нужной странице сайта. Мы решили добавить карту в раздел «Контакты». Заходим в админку «Нубекса», на панели управления выбираем раздел «Страницы», находим в списке нужный раздел и нажмимаем «Редактировать».

Работать будем с текстовым блоком. Нажимаем кнопку «Источник», чтобы перейти в режим редактирования кода. Вставляем в текстовое поле код, полученный на GoogleMaps, и сохраняем изменения.

Заходим на страницу «Контакты» нашего сайта и радуемся обновлениям!

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

Кроме карт от Google, вы так же можете разместить на сайте карты от Яндекс и 2gis, о них мы расскажем в соответствующих статьях.

nubex.ru

Разное → Как добавить на страницу карту Google со своей меткой и описанием

Процесс создания своей карты с меткой и описанием:

Логинимся в Google.

Переходим по ссылке Мои карты:

Кликаем на ссылку Создать новую карту:

Заполняем название карты и выбираем тип доступа:

Жмём на иконке Добавить метку:

Ставим метку в нужную точку на карте и заполняем название, описание:

Жмём кнопку Ок, затем Готово:

Слева, кликаем по названию созданной метки:

Справа кликаем по ссылке Ссылка и копируем код из поля HTML-код для добавления на веб-сайт:

Вставляем код на нужную страницу.

Рекомендую проделывать всё в браузере Google Chrome. У меня в Opera были проблемы с генерацией кода карты.

Комментарии

Я всё сделала как Вы написали, но у меня почему то только ссылка на карту, а самой карты на сайте так и нет. Что мне нужно сделать, чтобы карта появилась на сайте? Спасибо!

xandeadx.ru

Отвалились Google Maps? Без паники

В июне 2016 года гугл объявил о том, что прекратит поддержку использования карт без API ключа, но это вступило в силу только 11 июня 2018 года — доступ без ключа больше не поддерживается. Карты без такого ключа теперь «отваливаются», выдавая ошибку.

Для бизнеса это серьёзное испытание, особенно для корпораций: теперь нужно обязательно привязывать кредитную карту к аккаунту для оплаты, что может вызывать вопросы у бухгалтерии и трудности с организацией процесса оплаты. Даже если карта будет корпоративной, на каждый платёж нужен комплект закрывающих документов, а как их получить у Гугла — вопрос 🙂

Мы разобрались, зачем вообще были нужны такие нововведения, и что теперь делать владельцам проектов, где есть Гугл Карты.

Что поменялось

В мае 2018 Гугл представил новый инструмент для бизнеса — Google Maps Platform.

Вместо 18 отдельных API-интерфейсов теперь есть всего три основных продукта:

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

Изменилась и система оплаты. Гугл объединил Стандартный и Премиальный планы, чтобы сформировать единый тариф по основным продуктам: теперь на ежемесячное использование инструментов платформы бесплатно начисляется лимит в 200 долларов — если он будет превышен, за продукты Гугл уже придётся платить.

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

Сейчас Карты Google с API оплачиваются по каждому отдельному SKU (например, «статические мобильные карты» и «динамические» — это разные SKU), при этом API может иметь более одного SKU. Во многом это связано с развитием технологий: большой процент пользователей пользуется продуктами с мобильных устройств, и там есть своя специфика.

Гугл поменял некоторые SKU и добавил новые — то есть, клиенты оплачивают не стоимость загрузки карты, а стоимость конкретных действий пользователей с ней: например, раньше в стоимость загрузки входили загрузки панорам — теперь это отдельное SKU. А значит, не придётся переплачивать за пользователей, которые карту загрузили, а в режим панорамы не перешли. Если хотите самостоятельно покопаться в отличиях старых и новых SKU, вам сюда.

Стоимость = Использование SKU x Цена за каждое использование

Как пользоваться новыми продуктами Гугл

Теперь для доступа к новым продуктам от Гугл понадобится действительный ключ API и платежная учетная запись Google Cloud Platform. API-ключи позволяют обращаться к разработчикам по мере необходимости и помогают выявлять ошибки.

Как получить ключ (займёт не больше 15 минут):

• Пройти по ссылке.
• Нажать GET STARTED и следовать инструкции 🙂

Важно: когда попросят выбрать продукты («Pick product (s) below») — поставить галочки на Maps, Routes или Places (в зависимости от того, что вам нужно).

После получения ключа и его привязки к учетной записи, активируется выставление счетов, и вы получите доступ к бесплатному лимиту в 200 долларов США для использования Карт, Маршрутов и Мест.

Как быть текущим клиентам на старых тарифах:

• Для перехода с пакета «Стандарт» воспользуйтесь инструментом перехода. Он поможет защитить текущие проекты и сообщит вам, нужно ли активировать или обновить биллинги по ним.
• Для перехода с пакета «Премиум» придётся создать новый проект: получить новые ключи API и использовать их для замены существующих ключей. В Гугле рекомендуют связаться со специалистом по переходу с плана «Премиум» до истечения срока его лицензии.

Несмотря на бесплатный лимит в 200 долларов, для всех услуг Google Cloud Platform требуется кредитная карта и платежный аккаунт. Если платежную учетную запись не сделать, есть риск, что при превышении лимита карта просто отвалится (что сейчас и происходит со многими владельцами сайтов). Если предполагаемый ежемесячный бюджет выше 200 долларов, цены следующие:

Компаниям с большим объемом использования предлагают связаться с представителями Гугла для оформления пакета Enterprise: он предусматривает скидки за объём использований, корпоративную поддержку клиентов и/или оффлайн-контракты (вероятно, для больших корпораций, которые могут оплачивать услуги только через платежные документы).

Также Гугл рекомендует изучить руководство по оптимизации использования карт: например, советует использовать статические карты, если в динамическом отображении нет большой необходимости (это дешевле).

В чём неприятность для бизнеса

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

Но если сравнить старый тариф «Стандарт» и единый новый, получается не так весело. Раньше бесплатно было доступно 25 000 запросов в день, в месяц выходило 750 000 запросов:

Теперь же бесплатный лимит загрузки для, например, встраиваемых карт уменьшен до 14 000 запросов в месяц. Всё, что свыше — по $ 14 за каждую 1000 запросов сверху соответственно.

В российских реалиях встаёт ещё и уместный вопрос о платёжном аккаунте. На чьё имя он должен быть оформлен? Чью карту привязывать для списания средств при превышении лимита в $ 200? Как проводить через бухгалтерию? Почему-то об этом в руководстве Гугла ничегошеньки нет. Очередная задачка для вашего главбуха 🙂

Новая классификация инструментов Гугла и новая система биллинга призваны облегчить жизнь пользователям и оптимизировать их расходы. Вот только получилось не так радужно — пользователи увидели в этом инструмент для обогащения корпорации за их счёт.

Чтобы Гугл Карты исправно работали, достаточно получить ключ API. Есть бесплатный лимит на ежемесячные расходы — 200 долларов. Для оплаты затрат сверх этого лимита нужен платежный аккаунт с привязанной корпоративной кредитной картой.

Надеемся, что благодаря этому материалу клиенты вскоре снова смогут найти ваши офисы на картах. К слову, Яндекс.Карты пока бесплатны 🙂

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

vc.ru

Как вставить карту проезда из Google Maps (Yandex Maps)

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

Обычно карта проезда помещается на странице контактов под указанными данными для связи. Вставляется она с помощью специального программного кода (скрипта). Самыми простыми способами получения такого скрипта, является использование готовых API-решений от Google или Яндекс. Для вставки карты на сайт нет никакой необходимости в знании программирования, следуя изложенным ниже инструкциям, вы получите наглядную и удобную карту.

Вставка карты с помощью Яндекс Карт

1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке http://api.yandex.ru/maps/tools/constructor/ и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки «найти» система выдаст варианты найденных адресов.

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

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

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

5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста.

6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.

Вставка карты с помощью Google Maps

1. Алгоритм действий схож с описанным выше. Переходим по ссылке http://maps.google.ru/maps и вводим в строке поиска адрес организации. Можно также посмотреть, как это выглядит со спутника. Далее для получения кода нажимаем на знак ссылки слева. Можно скопировать имеющийся код, а можно нажать ссылку «настройка и предварительный просмотр встроенной карты».

2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры.

3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.

www.kasper.by

Обновление Google Maps: что делать, если карты перестали работать?

Если после 11 июля что-то пошло не так, можете не искать ошибку в своем коде, он абсолютно в порядке (а может и нет, однако он точно не причина возникнувших проблем с Google Maps).

Google поднял цены в 14 раз и уменьшил лимит бесплатных загрузок до 30 раз. Но паниковать не стоит! В TemplateMonster уверены, это небольшая проблема, которую не так уж сложно исправить.

Что случилось с Google Картами?

В мае Google объявила о слиянии 18 API в три продукта – Карты, Маршруты и Места. Кроме того, они предупредили пользователей о запуске платформы Google Maps 11 июля. С этого дня, чтобы использовать удобные карты на своем сайте, нужно получить специальный ключ API и зарегистрировать платежную учетную запись в Google Cloud.

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

Как это повлияет на разработчиков, поставщиков шаблонов и маркетплейсы?

Теперь сайты, которые используют Google Карты для отображения местоположения, утратят их. И растерянные их владельцы побегут к разработчикам в поисках объяснений. Вся эта ситуация вызвала очень горячую дискуссию на Reddit: разработчики пытаются выяснить, как исправить проблему и спрашивают совета, как объяснить это клиентам.

Что теперь делать?

Фактически, у нас есть только два доступных варианта – продолжать использовать Google Maps или использовать альтернативы.

Если вы прям жить не можете без Google Maps и считаете этот сервис жизненно важными для своего сайта – зарегистрируйтесь в Google Cloud и получите ключ API. Все ваши клиенты должны пройти ту же процедуру. Прочитайте всю важную информацию и детали об этом в Руководстве пользователя и порекомендуйте его своим клиентам.

Также мы собрали несколько советов, которые разработчики давали друг другу в дискуссиях на форумах:

В общем, каждый айтем с Google map должен иметь ключ API для работы. Мы создали новый ключ API для наших продуктов и ограничили доступ к работе только на нашем домене. Поэтому, когда юзеры будут покупать наш продукт, им нужно будет создать собственный ключ API и заменить наш.

Нам пришлось внедрить поле для api ключа карт, так как у наших пользователей было много проблем без него. Мы просто добавили настраиваемое поле в параметры плагина и инструкции по созданию ключа API. Сейчас все работает без сбоев, инструкции Google довольно просты. У клиентов, вроде, тоже нет проблем с гайдами Google для создания собственного api ключа.

Разработчики шаблонов WordPress, которые предпочитают искать альтернативы, могут попробовать OpenStreetMap, который является одним из лучших среди конкурентов Google Maps.

Bing Maps, Waze и HERE WeGo также заслуживают вашего внимания.

Друзья, поделитесь этой статьей со своими коллегами и клиентами, а также своими мыслями в комментариях ниже!

www.templatemonster.com