Как сделать свою карту Google Maps?

Создание собственных карт с использованием API Google Maps

В этой заметке я рассмотрю вопрос о том, как добавить собственную карту на Google Maps.

Это можно сделать несколькими способами.

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

Для этого в API карт Google существует объект GGroundOverlay.

В котором в качестве парамтров конструктора используются URL-адрес и объект GLatLngBounds изображения.

Объект GLatLngBounds представляет прямоугольник заданный географическими координатами.

Посмотрим реализацию данного способа на примере.

Добавим на карту Google фотографию церкви Рождества Христова в городе Балахне Нижегородской области, так, чтобы левый нижний угол совпадал по координатам с центром изображения на спутниковым снимке.

Вы можете посмотреть работающий пример и исходный код здесь.

В коде нужно обратить Ваше внимание на две строчки:

var boundaries = new GLatLngBounds(new GLatLng(56.489907,43.606367), new GLatLng(59.962385,48.418379));

var oldmap = new GGroundOverlay(«http://webmap-blog.ru/files/439px-Bal_Cerkov_Rojdestva_Hristova.jpg», boundaries);

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

Мы можем накладывать на карту фрагменты изображений.

Для этого используется класс GTileLayerOverlay.

GTileLayerOverlay дополняет карту с помощью GTileLayer. Он использует интерфейс GOverlay и таким образом добавляется в карту с помощью метода GMap2.addOverlay().

GTileLayer располагается поверх существующей карты.

Но прежде необходимо создать объект GCopyrightCollection и прикрепить его к слою карты; так объект получает право на использование изображения (или изображений).

С процессом наложения фрагментов изображения я подробно опишу как-нибудь в следущий раз.

А сейчас мы приступим к созданию собственной карты с использованием пользовательского типа карты.

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

Разберем с Вами как устроены карты Google , это нам поможет предварительно подготовить нашу карту.

В Google Maps Земля представлена в проекции Меркатора .

Она представляет собой развёрнутый на плоскость цилиндр, что даёт нам прямоугольник, который разбивается на маленькие квадратики (tiles) с размерами 256×256 пикселей.

Из адреса рисунка можно видеть следующие три значения:

x=20389, y=10149 и z=15

Здесь х – номер элемента карты по горизонтали, числа растут слева направо (с запада на восток),

Y – номер элемента карты по вертикали, числа увеличиваются с верху вниз (с севера на юг),

Z – уровень масштаба.

Из этого следует, что нам необходимо разбить изображение нашей карты на кусочки вида ties_20389_10149_15.jpg, каждый размером 256×256 пикселей. А чтобы можно было изменять масштаб изображения, подготовить изображения нескольких масштабных уровней.

Каждый масштабный уровень содержит в 4 раза большее количество элементов, чем предыдущий.

Например, нулевой уровень – 1 элемент, следующий – 4, второй уровень – 16 и т.д.

Еще нам нужно узнать три тех самых числа, которые дают нам местоположение нужного фрагмента карты.

Самый простой вариант загрузить нужный нам участок карты и посмотреть информацию о полученных изображениях (в FireFox: Инструменты->Информация о странице — > Мультимедиа).

Теперь нам необходимо разрезать наше изображение.

Сделать это можно разными способами:

На главной странице сервиса нужно ввести Ваш адрес электронной почты, выбрать файл для загрузки в формате jpg, png или gif и нажать на кнопку Send для начала загрузки файла.

Через некоторое время (продолжительность зависит от размера загружаемого изображения) появиться страница с загруженным изображением в интерфейсе Google Maps.

И три ссылки внизу изображения.

Для моего примера они имеют следующий вид:

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

В моем случае содержимое данного файла:

Это конечно хорошо, но хотелась бы, чтобы изображение элементов карты лежали на нашем сервере.

Для этого их необходимо загрузить на Ваш компьютер.

Сделать это можно по разному.

Приведу два способа.

Первый используя браузер FireFox выбрав последовательно Инструменты->Информация о странице — > Мультимедиа выделить файлы с изображением и сохранить их.

Проделать тоже самое для всех масштабных уровней.

Используя менеджер закачки файлов, например ReGet, создать очередь загрузки файлов в текстовом файле и импортировав его загрузить все элементы.

webmap-blog.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 Maps

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

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

Как сделать карту Google Maps

Один из самых простых способов для создания пользовательских карт, это сделать это через сам сайт Google Maps. Откройте maps.google.com и нажмите Создать карту в разделе Мои Места. Далее найдите место, или введите координаты вручную, и сохраните их в пользовательской карте. Повторяйте, тот шаг пока не будут добавлены все места на карту Google.

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

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

Как создавать более точные карты маршрутов

Другой вариант для рисования карты передвижения — QuikMaps . Программа преобразует Google Maps в изображение, и вы можете прокладывать маршруты на карте так же, как вы рисуете от руки на любом холсте. После того как вы набросаете маршрут, экспортируйте его в виде KML файла, который может быть импортирован в Google Maps или Google Earth для публикации.

Создание Google Maps из листов Excel

Одно небольшое неудобство с помощью инструмента Google Maps является то, что сервис не позволяют ввести точки массово. Да, есть варианты, чтобы импортировать KML и GeoRSS файлы, но как же создать эти файлы?

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

Как добавить анимацию к вашим картам Google

Вы может быть видели карты отслеживания полета, где несколько изображений самолета, двигаются по разным траекториям на одной карте Google. Если вы хотели бы иметь что-то подобное для вашей собственной карты Google Map, посмотрите на сервис Animaps.

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

Пользовательские Google Maps для продвинутых пользователей

Опытные пользователи могут создавать собственные Google Maps, просто изменив несколько параметров в URL карт. API (Static Maps API) статических карт имеет полный список параметров, поддерживаемых Google Maps, а также несколько примеров. Большим преимуществом использования карт является то, что вы можете изменить их довольно быстро, и легко вставлять в веб страницы не используя IFRAMES или JavaScript.

catamobile.org.ua

Как создать свою карту в приложении Google maps

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

Хорошим подспорьем при составлении маршрута, является возможность создать свою карту на платформе Google Maps.

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

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

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

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

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

Открыть карты гугль, нажимаем на три линии в левом углу:

Выбрать пункт «Мои места»:

Внизу синяя кнопка «создать карту»:

Вот эта кнопка поближе:

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

В появившемся окошке даем карте подходящее название, например, Рим, можно также добавить описание, и — сохранить:

Общий вид новой карты:

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

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

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

На каждом слое можно добавлять очень много мест, но количество самих слоев ограничено.

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

В поисковой строчке пишем название места или его координаты:

И добавляем на карту:

После добавления на карту, внизу становятся доступны кнопки редактирования, наполовину закрашенный ромб — это стиль:

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

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

Следующая кнопка — редактирование:

Здесь можно добавить описание:

Когда информации на карте станет много, появится опция открыть карту в «моих картах»:

Мне удобнее работать именно в «моих картах», и я работаю только там.

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

Добавляем новый слой и переименовываем его, для этого нужно нажать на «добавить слой»:

Появился новый слой:

Новый слой на карте:

Переименовываем слой, нажимаем на три точки, появляется окошко для нового названия:

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

Перенесенная точка появилась на новом слое:

Вот и все, всем приятных путешествий!

Понравилась статья? Поделись с друзьями:

Шварцвальд

Австрия

Salzburgerlandcard описание + карта

Озеро Гарда

Словакия и Польша

Голландия

Северная Польша

5 дней в Риме

Как создать карту

www.chudesnayastrana.ru

Как создавать свои карты и маршруты в Google Maps и делиться ими с друзьями

Иногда сервис «Google Карты» уступает в знании местности жителям и предлагаемые им маршруты не всегда удобны. Порой «Google Карты» могут даже проложить маршрут по закрытой или опасной дороге, что впоследствии может привести ко всевозможным проблемам.

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

Как создавать пользовательские маршруты в «Google Картах»

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

1. Нажмите иконку «Создать новую карту».

2. Имя карты можно изменить, нажав на «Карта без названия».

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

3. Данное действие создаст на карте первый слой. В поле A введите начальную точку и в поле B введите пункт назначения. На карте появятся указания. Если вы хотите добавить дополнительные остановки, нажмите «Добавить пункт назначения».

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

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

6. Вы также можете изменить порядок, в котором будете посещать пункты назначения на каждом слое карты, перетащив их в списке слева.

7. Когда карта будет готова, вы можете отправить ее на телефон или поделиться с другом. Для этого нажмите кнопку «Поделиться» и настройте совместный доступ как для любого документа на Google Диске.

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

8. Пользователи iPhone смогут просматривать карты в приложении «Карты Google», нажав «Меню» → «Карты».

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

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

yablyk.com