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

Автор: | 31.05.2009

В этой заметке я рассмотрю вопрос о том, как добавить собственную карту на 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 пикселей.

Пример одного из элементов карты Google: http://mt3.google.com/mt/v=ap.95&hl=ru&x=20389&s=&y=10149&z=15&s=Gali

Пример элемента карты Google Maps

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

x=20389, y=10149 и z=15

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

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

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

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

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

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

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

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

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

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

  1. Использовать онлайн-сервис Gmap Uploader http://gmapuploader.com/

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

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

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

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

Link: http://gmapuploader.com/view/HG6r3eySJq

Full Screen: http://gmapuploader.com/iframe/HG6r3eySJq

Deep Zoom URL: http://dz.gmapuploader.com/HG6r3eySJq.xml

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

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

<Image TileSize=»256″ Overlap=»0″ Format=»jpg»><Size Width=»4096″ Height=»4096″ />

</Image>

Своя карта на Google Maps с использованием сервиса Gmap Uploader

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

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

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

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

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

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

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

Текстовый файл для нашего примера:

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-1-0.jpghttp://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-1-1.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-1-2.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-1-3.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-0.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-1.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-2.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-3.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-4.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-5.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-6.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-7.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-8.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-9.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-10.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-11.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-12.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-13.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-14.jpg

http://mt0.gmapuploader.com/tiles/HG6r3eySJq/tile-2-15.jpg

http://mt2.gmapuploader.com/tiles/HG6r3eySJq/tile-4-220.jpg

http://mt2.gmapuploader.com/tiles/HG6r3eySJq/tile-4-221.jpg

http://mt2.gmapuploader.com/tiles/HG6r3eySJq/tile-4-222.jpg

http://mt2.gmapuploader.com/tiles/HG6r3eySJq/tile-4-223.jpg

http://mt2.gmapuploader.com/tiles/HG6r3eySJq/tile-4-224.jpg

После этого все закаченные файлы мы помещаем в какую-нибудь папку на сервере (например, files/bal_map/) и пишем следующий код для вывода карты:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»><html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<title>Своя карта на Google Maps c использованием Gmap Uploader</title>

<style type=»text/css» media=»screen»>

<!—

html,body{

height: 100%;

margin: 0;

}

div#map{

height: 100%;

margin: 0;

}

—>

</style>

<script src=»http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ»

type=»text/javascript»></script>

<script src=»http://gmapuploader.com/js/gmapuploader.8.js» type=»text/javascript»></script>

</head>

<body onunload=»GUnload()»>

<div id=»map»></div>

<script type=»text/javascript»>

//<![CDATA[

var map = new GMap2(document.getElementById(«map»));

document.getElementById(‘map’).style.backgroundColor = ‘white’;

var mapType = new GmapUploaderMapType(map, «http://webmap-blog.ru/examples/files/bal_map/», «jpg», 5);

map.setCenter(new GLatLng(0,0), 1, mapType);

map.addControl(new GLargeMapControl());

map.enableContinuousZoom();

//]]>

</script>

</body>

</html>

Загружаем его в браузере и наблюдаем резльтат.

Своя карта на Google Maps c использованием Gmap Uploader

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

Здесь необходимо обратить внимание на следующие строчки:

<script src=»http://gmapuploader.com/js/gmapuploader.8.js» type=»text/javascript»></script> — для вывода карты используется специальный скрипт сервиса Gmap Uploader.

Строка var mapType = new GmapUploaderMapType(map, «http://webmap-blog.ru/examples/files/bal_map/», «jpg», 5); — в ней указывается источник файлов с изображением, расширение файла и максимальный уровень масштаба 5.

Другие способы добавления собственной карты на Google Maps я рассмотрю последовательно в нескольких заметках.

Продолжение следует …

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

  1. Ashar

    Т.е. имея информацию о точеках привязки растрового изображения к координатам можно «правильно» наложить свою карту… Например взять MAP файл и растровое изображение из OZI, задать координаты левого нижнего/верхнего угла и получить оверлей с необходимой привязкой?

    А как подобное сделать для yandex карт, через map.setCenter?

  2. Tester

    Можно-ли ставить маркеры(объекты) на своих картах?

    1. admin Автор записи

      Да возможно. Поскольку для вывода своей карты используется стандартный API карт Google, то для добавления маркеров на карту можно пользоваться стандартными функциями

  3. Tester

    И есть ли подобный компонент (для создания собственных карт с использованием API Google Maps) для Joomla?

  4. Tester

    Gmaps — не поддерживает Joomla 1.5 (к сожалению)

    Google Maps Multipage — не нашел функции вставить своё изображение (карту) 🙁

    1. admin Автор записи

      Gmaps можно использовать с Joomla 1.5 если включить режим совместимости с версией 1.0 (включить специальный плагин Система — Поддержка старых расширений (Legacy)).

      Написал специальную заметку про плагин Google Maps для Joomla http://webmap-blog.ru/?p=179

  5. Quandr

    У меня есть собственные геоданные в KML. Стандартная карта (подложка) мне не нужна. Можно ли ее отключить?

    1. admin Автор записи

      Отключить её нельзя. Можно нарезать пустые тайтлы и закрыть ими карту Google.

  6. Quandr

    И еще вопрос. Можно ли отключать какие-то слои (скажем автомобильные дороги) в стандартной карте Google Maps?

    1. admin Автор записи

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

  7. Bonza

    Возможно ли использовать свои карты (находятся на нашем сервере) и пользоваться всей функциональностью GooglMap ?

  8. Евгений

    Доброго времени суток, Сергей! У меня на сайте используется также собственная карта города Лысьва с использованием API Google Maps (http://lysvagrad.net/index.php?option=com_wrapper&Itemid=83)

    Подскажите, возможно ли использовать также свою карту, например в SOBI2. У вас недавно, была статья «Изменяем компонент каталога SOBI2 для Joomla, заменяем карты Google на Яндекс.Карты», может быть подскажете, как заставить отображать SOBI2 не стандартную карту (например спутник), а именно свою карту?!

  9. tsweb

    Единственная вменяемая статья на эту тему. Если бы не одно НО — не работает оно. Описан огромный гимповский скрипт, а простых комментариев к коду вывода карты — нет. Ковыряю — неделю — бесполезно.

  10. Olenjonok

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

  11. ьпки

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

    1. admin Автор записи

      Можно, если сделать дополнительный слой в виде тайлов с прозрачным фоном в формате png и наложить поверх карты Google

  12. ьпки

    спасибо за ответ.
    а поиск потом можно будет как-то организовать по улицам? надо как-то занести в базу названия улиц и координаты и искать по этой базе?

    1. admin Автор записи

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

  13. WolfHunter

    Как бы теперь всё это к API Google Map v3 прикрутить????
    статья «Переходим от API Google Map v2 к версии 3» чего-то вообще не помогает ((((

  14. WolfHunter

    куда вот это присунуть?!
    var mapType = new GmapUploaderMapType(map, «http://webmap-blog.ru/examples/files/bal_map/», «jpg», 5);

  15. Олег

    Добрый день! А есть ли такая возможность: создать собственную карту, но на ней выводить разметку улиц? Т.е., по сути, как режим «Гибрид» , только вместо спутникового снимка будет моя карта (есть собственная аэрофотосъёмка) а на ней выводятся линии улиц и их названия. Заранее спасибо за ответ. С уважением, Олег.

    1. admin Автор записи

      Можно создать новый слой со своей картой и наложить его поверх карты Google, а можно создать новый тип карты со своим слоем.

  16. Олег

    Извините, не совсем понял. Я создаю новый слой и он перекрывает всё, как в примере. Объясните, пожалуйста, подробнее.

    1. admin Автор записи

      Свой слой на Google карту можно разместить двумя способами:
      — наложить поверх слоя Google Maps как оверлей (к оверлеям относятся метки, линии, полигоны, изображения).
      Изображения могут быть, кроме формата jpeg, еще png и gif — в которых может быть прозрачный фон;
      — создать новый тип карты со своим слоем, если на карте добавлен элемент управления типом карты, можно переключаться между доступными типами.

  17. Денис

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

    1. admin Автор записи

      Возможно, но для этого нужно реализовать систему уровней доступа

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *