воскресенье, 28 июня 2009 г.

Использование Static API Яндекс.Карт

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

Для этих случаев существует возможность размещения статического изображения Яндекс.Карт - Static API Яндекс.Карт.

В ответ на HTTP-запрос, передаваемый посредством URL с параметрами, API возвращает изображение с картой.

В запросе указываются требуемые слои карты, ее центр и область показа, размер карты и уровень масштабирования. Также на карте можно отобразить метки и ломаные линии.

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

Как уже говорилось, Static API формирует изображение карты в соответствии со значениями параметров, передаваемых сервису в URL следующего формата:

http://static-maps.yandex.ru/1.x/?{параметры URL}

Строка {параметры URL} представляет собой последовательность пар вида {имя параметра}={значение параметра}, разделенных символом амперсанда (&).

Приведу пример запроса изображения карты Нижнего Новгорода с нумерованной меткой:

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&size=450,450&z=15&l=map&pt=44.017152,56.315455,pmwtm1&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты Нижнего Новгорода с нумерованной меткой

Давайте разберем какие параметры здесь задаются.

Параметр ll – задает долготу и широту центра карты в градусах, в нашем примере ll=44.017152,56.315455

Следующий параметр size – указывает ширину и высоту запрашиваемого изображения карты в пикселях, в примере size=450,450

Максимально допустимый размер изображения карты составляет 600x450 пикселов.

Параметр z – задает уровень масштабирования карты (0-17), в примере z=15

Параметр l – перечень слоев, определяющих тип карты: map (схема),  sat (спутник) и  sat, skl(гибрид). В примере l=map

Параметр pt - содержит описание одной или нескольких меток, которые требуется отобразить на карте.

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

В нашем примере pt=44.017152,56.315455,pmwtm1

Параметр key – API-ключ Яндекс.Карт

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

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

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

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

Приведу пару примеров.

Область показа 0.3х0.3 градуса

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&spn=0.3,0.3&size=450,450&l=map&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - Область показа 0.3х0.3 градуса

Область показа 5х5 градусов

http://static-maps.yandex.ru/1.x/?ll=44.017152,56.315455&spn=5,5&size=450,450&l=map&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - Область показа 5х5 градусов

Разберем более подробно, как задаются параметры для отображения меток и ломанных.

Параметр pt служит для отображения на изображении карты одну или несколько меток (до 100).

Описание каждой метки записывается по следующей схеме:

{долгота},{широта},{стиль}{цвет}{размер}{текст}

Стиль обозначается pm.

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

wt - белый;

do - темно-оранжевый;

db - темно-синий;

bl - синий;

gn - зеленый;

gr - серый;

lb - светло-синий;

nt - темная ночь;

or - оранжевый;

pn - розовый;

rd - красный;

vv - фиолетовый;

yw - желтый.

Размер: s - маленький; m - средний; l - большой.

В качестве текста может выступать число от 1 до 99.

Если метка содержит недопустимые символы (любые, кроме чисел от 1 до 99), то она не отображается.

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

Пример изображения карты с несколькими метками.

http://static-maps.yandex.ru/1.x/?ll=43.979459,56.291908&size=450,450&z=11&l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3~44.073827,56.308056,pmrdm4~43.871158,56.347345,pmrdm5&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты с несколькими метками

Для отображения ломаных служит параметр pl.

Возможно отобразить одну или несколько ломанных описания которых перечисляются через тильду (~).

Описание ломаной имеет следующий формат:

с:{цвет},w:{толщина},{вершины}

Цвет линии задается в виде шестнадцатиричного числа в формате RGBA (вида  0xFFFFFFFF). Первые 6 символов задают цвет в системе RGB, последующие два - прозрачность линии. Значение прозрачности лежит в диапазоне от 00 (прозрачная) до FF (непрозрачная).

Толщина линии задается в пикселах.

Если цвет и толщина линии не заданы, то используется сиреневая полупрозрачная линия толщиной 5 пикселов ( 8822DDС0).

Координаты вершин ломаной линии могут задаваться двумя различными способами: простым перечислением через запятую  ( Долгота1,Широта2,...,ДолготаN,ШиротаN) или в виде base64-последовательности (требуется кодирование координат вершин).

Static API позволяет одновременно задать не более 5 ломаных, при этом общее количество вершин не должно превышать 100.

Пример формирования запроса на изображение карты с ломаной линией.

В примере цвет линии красный FF0000, полупрозрачная – C0, толщиной w:4 писеля

http://static-maps.yandex.ru/1.x/?l=map&pl=c:FF0000C0,w:4,43.996284,56.329571,43.996143,56.329735,43.996086,56.329918,43.995998,56.330093,43.995888,56.330269,43.995392,56.330330,43.995804,56.330345,43.995522,56.330448,43.995716,56.330593,43.995590,56.330795,43.995449,56.330963,43.994267,56.330708,43.993912,56.330681,43.993576,56.330658,43.993248,56.330585,43.992897,56.330490,43.992626,56.330372,43.992298,56.330292,43.991982,56.330242,43.991653,56.330238,43.991322,56.330242,43.990993,56.330196,43.990688,56.330128,43.990322,56.330082,43.990002,56.330036,43.989723,56.329941,43.989353,56.329819,43.989044,56.329685,43.988747,56.329578,43.988583,56.329407,43.988213,56.329300,43.987789,56.329205,43.987343,56.329136,43.986950,56.329079,43.986588,56.329029,43.986328,56.328899,43.985947,56.328819,43.985538,56.328747,43.985191,56.328667,43.984882,56.328602,43.984604,56.328491,43.984333,56.328381,43.984047,56.328243,43.983761,56.328136,43.983440,56.328045,43.983082,56.327847,43.982815,56.327694,43.982525,56.327583,43.982212,56.327461,43.981937,56.327362,43.981644,56.327236,43.981365,56.327129,43.981094,56.327026,43.980770,56.326893,43.980480,56.326771,43.980251,56.326622,43.980110,56.326443,43.980019,56.326241,43.979836,56.326092,43.979626,56.325954,43.979378,56.325832,43.979130,56.325699,43.978851,56.325588,43.978554,56.325508,43.978218,56.325516,43.977921,56.325619,43.977646,56.325733,43.977375,56.325836,43.977093,56.325951,43.976841,56.326065,43.976604,56.326191&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - изображение карты с ломаной линией

В Static API имеется возможность позиционирования карты при помощи меток и ломаных.

Если на изображении карты указана хотя бы одна метка или ломанная, а значения для центра карты (параметр  ll), области показа (параметр  spn) или уровня масштабирования (параметр  z) не указаны, то Static API подберет их значения так, чтобы все метки и ломаные были видны на карте.

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

Изменим набор параметров примера изображения карты с несколькими метками удалив от туда параметры ll, size и z.

http://static-maps.yandex.ru/1.x/?l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3~44.073827,56.308056,pmrdm4~43.871158,56.347345,pmrdm5&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - возможность позиционирования карты при помощи меток

Уберем от туда метки 4 и 5

Получим

http://static-maps.yandex.ru/1.x/?l=map&pt=43.944335,56.317977,pmrdm1~43.993976,56.317213,pmrdm2~43.93104,56.286148,pmrdm3&key=AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==

Пример использования Static API Яндекс.Карт - возможность позиционирования карты при помощи меток (без меток 4 и 5)

Новая версия API Яндекс.Карт 1.1.0

25 июня 2009 года опубликована новая версия API Яндекс.Карт.


В версии 1.1. доступны новые возможности:



  • построение автомобильных маршрутов (только для Москвы);

  • рисование полигонов;

  • контрол "строка поиска" размещаемый поверх карты;

  • редактирование графических объектов (полилиний и полигонов);

  • использование собственной системы координат;

  • расширена схема наследования стилей;

  • макеты (собственное оформление и поведение иконок, хинтов, балунов).


С полным списком нововведений и исправлений можно ознакомиться по адресу http://api.yandex.ru/maps/jsapi/whatsnew.xml


Версия 1.1. не совместима со старыми версиями (все версии ветки 1.0.). Она отличается от предыдущих не только добавленными возможностями, но и изменениями в структуре классов, объектов и методов.


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


Ветка версий 1.0. больше не будет развиваться и дополняться, будут лишь устраняться критические ошибки.

понедельник, 22 июня 2009 г.

Плагин Google Maps для Joomla

На страницах данного блога я уже писал о плагине Яндекс.Карт для Joomla, в этой заметке я хочу рассказать вам о плагине Google Maps для Joomla.

С начала я расскажу об основных возможностях плагина и после этого рассмотрю несколько примеров его использования.

Скачать сам плагин можно по адресу: http://joomlacode.org/gf/project/mambot_google1/frs/

Данное расширение представляет собой плагин (мамбот) для отображения одной или нескольких карт Google в содержании страниц, модулей и компонентов системы Joomla верий 1.0.x и 1.5.x.

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

Щелкнув по ссылке с названием данного плагина, откроется окно для установки его параметров .

У него много различных параметров, но для начала его использования нам понадобятся только два - Активировать (Enabled) для активации плагина и Google API key в правой части окна, для ввода ключа к API Google Maps.

Сохраняем сделанные настройки.

Для добавления карты в нашу статью нужно в её текст добавить специальный тег { mosmap}.

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

Тег mosmap может содержать в себе параметры отображения карты.

Я перечислю основные из них.

width, height - параметры ширины и высоты окна карты, могут задаваться как в пикселях, так и в процентах;

lat, lon - значение широты и долготы центра карты;

zoom - значение масштабного уровня карты;

zoomNew - когда равно 1 при двойном клике мышью происходит центрирование и масштабирование в данной точке, а при равном 0 только центрирование ( по умолчанию - 0);

zoomType - тип элемента масштабирования (Small - малый или Large - большой, None - отсутствует);

mapType - начальный тип карты (Normal - обычная по умолчанию, Satellite - спутник, Hybrid - гибридное, Terrain -ландшафт );

showMaptype - отображать или нет переключатель типа карты;

overview - показывать или нет обзорную карту (1 - показывать, 0 - нет);

text - текст для маркера в балуне, если хотите чтобы текс не отображался наберите text='', для добавления гиперссылок в текст используйте код следующего формата <a href=linkAddress target=linkTarget title=linkTitle>linkName</a>, не используйте двойные кавычки.

tooltip - использовать Tooltip, когда мышь наводиться на маркер, не используйте html;

marker - открывать или нет информационное окно для маркера на начальном этапе загрузки карты (1- открывать, 0 - нет);

icon - для задания пути (url) к файлу изображения пользовательской иконки;

kml - для задания пути (url) к файлу в формате KML ;

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

Чтобы Вам окончательно стало понятно как с данным плагином работать рассмотрим несколько примеров.

Пример 1. Простая карта с маркером.

Для этого в страницу Вы должны добавить следующую строчку:

{mosmap width='500'|height='400'|lat=' 56.3333|lon='44.0'|zoom='10'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|overview='0'|text='Нижний Новгород'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Простая карта с маркером - Google Maps для Joomla

Посмотреть пример в действии можно здесь

Пример 2. Карта со своим значком для иконки и html-текстом в балуне.

Добавим строку вида:

{mosmap width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Карта со своим значком для иконки и html-текстом в балуне - Google Maps для Joomla

Посмотреть пример в действии можно здесь

Пример 3. Карта с использованием KML-файла.

Для этого добавим строку вида:

{mosmap kml='http://webmap-blog.ru/files/kinoteatrs.kml|'overview='0'}

Загрузив страницу в браузере, мы увидим следующее

Карта с использованием KML-файла - Google Maps для Joomla

Посмотреть пример в действии можно здесь

Пример 4. Карта во всплывающем окне.

Для этого добавим строку вида:

{mosmap lightbox='1'|lbxwidth='600px'|lbxheight='600px'|show='0'|align='none|width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее

Карта во всплывающем окне - Google Maps для Joomla

Посмотреть пример в действии можно здесь

Все примеры на одной странице здесь

Более подробную информацию о плагине и примеры его использования можно найти по адресу http://tech.reumer.net/Google-Maps/Demo-Google-Maps/

воскресенье, 7 июня 2009 г.

Плагин Яндекс.Карт для WordPress

В этой заметке я хочу представить вам плагин Яндекс.Карт для WordPress.

Его автором является владелец блога «СВОЙ ЖУРНАЛ» http://www.otrip.ru/.

Он мне понравился больше, чем уже существующий плагин Yandex Maps for WordPress и я решил о нем рассказать Вам.

Работа плагина чрезвычайно проста.

После его установки и активации в меню настройки административной панели управления блогом WordPress нужно выбрать пункт Yandex Map (XML).






Узнайте, как шаг за шагом создать качественный блог на движке Wordpress.
109 Видеоуроков По Всем Техническим Вопросам Создания и Ведения Своего Блога На Движке Wordpress




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

Сохранить введенную информацию нажав кнопку Save.

После этого Вы можете добавлять Яндекс .Карты на страницы своего блога.

Приведу несколько примеров использования.




[yamap: 44.002593755722,56.3282688291559, 16]



– данная строка создаст карту с центром в указанных координатах и уровнем масштаба 16.




[yamap: http://webmap-blog.ru/examples/YMapsML/gpx-trek.xml]



– данная строка создаст карту со стандартными настройками и затем подгрузить подгрузит указанный XML файл (формат YMapsML).

В одной из заметок я приводил Вам пример файла в формате YMapsML – кинотеатры Нижнего Новгорода (его адрес: http://webmap-blog.ru/examples/YMapsML/prim_YMapsML_2.xml).

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

[yamap: http://webmap-blog.ru/examples/YMapsML/prim_YMapsML_2.xml]

Загрузить данный плагин можно по адресу: http://www.otrip.ru/uploads/2009/05/otrip-yamap.zip

понедельник, 1 июня 2009 г.

Создание собственных карт с использованием 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 пикселей.

Пример одного из элементов карты 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 я рассмотрю последовательно в нескольких заметках.

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