Blog

Добавить собственную карту не так сложно, как может показаться
Итак приступим…

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

Пример кусочка карты от Google:
http://mt1.google.com/mt?v=ap.88&hl=ru&x=285&y=162&z=9&s=G

здесь можно видеть следующие значения
x=285 y=162 zoom=9

т.е. нам нужно хранить свою картинку по кусочкам вида:
tile_285_162_9.jpg
(или, разумеется, аналогичным образом хранить изображения в БД)

Чтобы описать кусочек карты нужно знать три числа:
1 – его номер по вертикали (числа растут сверху вниз (т.е. с севера на юг)) ( в примере — 285)
2 – его номер по горизонтали (числа растут слева направо (с запада на восток)) (162)
3 – его уровень увеличения ( zoom) (9)

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

Итак, у нас есть изображение, которое мы хотим наложить на карту или показать вместо карты.
Во-первых, нужно узнать те самые три числа, которые дают нам местоположение нужного кусочка карты.
В самом простом случае можно загрузить нужный нам участок карты и посмотреть информацию о полученных изображениях (в FireFox: Инструменты->Информация о странице — > Мультимедиа) или же можно воспользоваться online-сервисом [6].
Там нужно ввести координаты и уровень увеличения интересующего нас места на карте и он покажет нужные нам числа, но самое интересное — через данный сервис можно загрузить свою картинку и он её нам разрежет на необходимое количество кусочков и даст им нужные имена в формате:

Tile_18250_10410_15.jpg

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

! Следует учесть, что картинку придётся подгонять под те самые квадратики карты !

Можно воспользоваться Photoshop-ом, я же использую для этих целей Gimp.
Чтобы в нём разрезать картинку нужно по вертикали и горизонтали картинки (уже подогнанной под карту, т.е. уже обрезанной или смещённой нужным образом) через каждые 256 пикселей вывести направляющие (Изображение->Направляющие->Новая направляющая)
Далее выполняем преобразование гильотина (Изображение->Преобразование->Гильотина)
!процедура крайне требовательная к оперативной памяти!
После этого у нас появится много кусочков изображения, которые сохраняются с именами вида:
p4.jpg – исходное изображение
p4-00-00.jpg
p4-01-00.jpg
…
p4-01-07.jpg
..
p4-09-00.jpg
и т.д.
Нумерация идёт так же как и на карте – первый номер – столбец, второй – строка.

Чтобы переименовать (или лучше сказать – перенумеровать) получившиеся картинки я написал небольшой скрипт на питоне:

2. #
3. # For copy files from def-00-00.jpg to tile\tile_18243_10406_15
4. #
6. import os
8. # for copy
9. import shutil
12. srcfile="p4-01-01.JPG"
13. dstfile=""
15. #-----------------------------------------
16. #
17. # begin here :)
18. #
19. print "Start..."
21. path = srcfile
23. tilex=281
24. tiley_beg=160
25. tiley=tiley_beg
26. zoom='9'
28. for i in range(1,10):
29. for j in range(1,8):
30. if i<= 9:
31. x='0'+str(i)
32. else:
33. x=str(i)
34. if j<= 9:
35. y='0'+str(j)
36. else:
37. y=str(j)
38. srcpath='p4-'+x+'-'+y+'.jpg'
39. if os.path.exists(srcpath):
40. print srcpath, ' exists'
41. shutil.copy(srcpath,'tile\\tile_'+str(tilex)+'_'+str(tiley)+'_'+zoom+'.jpg')
42. else:
43. print 'Cant find', srcpath
44. tiley+=1
45. tilex+=1
46. tiley=tiley_beg
48. print "Done."

* This source code was highlighted with Source Code Highlighter.

В скрипте нужно установить следующие параметры:
tilex – номер крайнего изображения по вертикали на карте Google
tiley_beg – номер крайнего изображения по горизонтали на карте Google
zoom – уровень увеличения на карте Google
Далее изменить граничные условия циклов по количеству ваших полученных картинок.
Не забыть внести изменения в srcpath, внеся туда своё название картинки.
После выполнения скрипта в директории tile будут ваши файлы с именами:
tile_281_160_9.jpg
tile_281_161_9.jpg
…
tile_289_166_9.jpg

Осталось только настроить вывод вашей карты, средствами Google Maps.

Для приведённого примера:

1. function add_custom_map(map)
2. {
3. var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
4. var copyrightCollection = new GCopyrightCollection('Map Data:');
5. copyrightCollection.addCopyright(copyright);
7. var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
8. tilelayers[0].getTileUrl = CustomGetTileUrl;
10. tilelayers[0].getCopyright = function(a,b)
11. {
12. var c= copyrightCollection.getCopyrightNotice(a,b);
13. if (!c)
14. {
15. c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
16. }
17. return c;
18. }
20. var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});
22. map.addMapType(custommap);
23. }
25. function CustomGetTileUrl(a,b)
26. {
27. if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
28. return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
29. else
30. return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
31. }

* This source code was highlighted with Source Code Highlighter.

Как видно – сначала создаётся copyright для слоя, а затем сам слой с вашей картой.
В параметр getTileUrl передаётся функция возвращающая ваши кусочки карты — CustomGetTileUrl(a,b)
, где a – точка с параметрами a.x и a.y, которые указывают местоположение картинки по вертикали и горизонтали
b – уровень приближения слоя.
Строчка return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
Возвращает родную картинку Google Maps – если эту строчку убрать, то на карте будет отображаться только ваша картинка.

Полный вариант:

1. <html>
2. <head>
3. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
4. <title>Google Custom Maps</title>
5. <!-- key for karta39.ru :) -->
6. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsL2VORzTwmVBxxfMiMNG7hSQWpIDMILbmlKIxypjOkZkxcl47xRnQ74rU6B3rYRRuou-6ZHLri9jUA"
7. type="text/javascript"></script>
9. <script type="text/javascript">
10. //<![CDATA[
12. function initialize()
13. {
14. if (GBrowserIsCompatible())
15. {
16. var map = new GMap2(document.getElementById("map"));
17. var mmmap = map;
18. //map.addControl(new GScaleControl());
19. map.addControl(new GLargeMapControl()); // контрол перемещения и приближения
20. map.addControl(new GMapTypeControl()); // контрол режима карты
21. map.setCenter(new GLatLng(54.707168569101256,20.510530471801758),9);    // Kaliningrad
22. add_custom_map(map);
23. }
24. // display a warning if the browser was not compatible
25. else
26. {
27. alert("Sorry, the Google Maps API is not compatible with this browser");
28. }
29. }
31. function add_custom_map(map)
32. {
33. var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(57.72883324000875,16.471134185791016),new GLatLng(49.693182016907464,25.556020736694336) ),8, "Karta39");
34. var copyrightCollection = new GCopyrightCollection('Map Data:');
35. copyrightCollection.addCopyright(copyright);
37. var tilelayers = [new GTileLayer(copyrightCollection , 9, 9)];
38. tilelayers[0].getTileUrl = CustomGetTileUrl;
40. tilelayers[0].getCopyright = function(a,b)
41. {
42. var c= copyrightCollection.getCopyrightNotice(a,b);
43. if (!c)
44. {
45. c = G_NORMAL_MAP.getTileLayers()[0].getCopyright(a,b);
46. }
47. return c;
48. }
50. var custommap = new GMapType(tilelayers, new GMercatorProjection(10), "Custom Map", {shortName:"1645"});
52. map.addMapType(custommap);
53. }
55. function CustomGetTileUrl(a,b)
56. {
57. if (b==9 && a.x>280 && a.x<290 && a.y>159 && a.y<167)
58. return "tile_"+a.x+"_"+a.y+"_"+b+".jpg";
59. else
60. return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
61. }
62. //]]>
63. </script>
64. </head>
65. <body onload="initialize()" onunload="GUnload()">
66. <div id="map" style="width: 500px; height: 300px"></div>
67. </body>
68. </html>

* This source code was highlighted with Source Code Highlighter.

Посмотреть пример можно здесь: http://karta39.ru/map/2/cm.html
Стандартная карта:

Включён режим нашей карты:

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

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

Для этого нужно добавить в add_custom_map следующий код:

1. var paleLayer = new GTileLayer(copyrightCollection,12,12);
2. paleLayer.getTileUrl = CustomGetTileUrl;
3. paleLayer.getOpacity = function() {return 0.5}
4. var tilelayers3 = [G_NORMAL_MAP.getTileLayers()[0], paleLayer];
5. var custommap3 = new GMapType(tilelayers3, new GMercatorProjection(10), "1645 Mixture", {shortName:"1645Mx"});
6. map.addMapType(custommap3);

* This source code was highlighted with Source Code Highlighter.

Вот, в принципе, и всё

Успехов!

Ссылки:
[1] http://code.google.com/intl/ru_ALL/apis/maps/documentation/reference.html
[2] http://econym.googlepages.com/index.htm — Google Maps API Tutorial
[3] http://econym.googlepages.com/custommap.htm
[4] http://int2e.com/blog/how-to-make-a-site-like-mapwowcom/
[5] http://mapki.com/wiki/Automatic_Tile_Cutter
[6] http://open.atlas.free.fr/GMapsTransparenciesImgOver.php