[Web] Jak zrobić własną mapę w google maps?
Pamiętam jak trzy lata temu próbowałem zrobić własną mapę i podpiąć ją do google maps. Wtedy trwało to dobre dwa dni (przygotowanie mapy i kodu JS), przekopanie się przez dokumentację i programy, które dzieliły grafikę na kartoniki (nie miałem PSa). Wtedy to była mordęga, na szczęście dzisiaj jest to dziecinnie proste z programem GmapImageCutter, który właściwie wszystko wykona za nas.
Byłem zszokowany, że pocięcie i przygotowanie mapy zajmuje maksymalnie pięć minut. I to w kilku klikach.
Na początku musimy pobrać wspomniany program. Instalacja nie jest wymagana ponieważ jest to aplikacja napisana w Javie a tę podejrzewam, każdy posiada.
Musimy też posiadać grafikę mapy, którą chcemy wdrożyć. Musi mieć ona kwadratowy wymiar a jej szerokość i wysokość musi być wielokrotnością liczby 256 (ponieważ taką wielkość posiada pojedynczy tileset). Także albo grafika powinna mieć wymiar 512×512 lub 1024×1024 lub 2048×2048 itd. Wszystko to po to abyśmy na wygenerowanej mapie nie mieli czarnych/białych pasków wzdłuż lub wszerz.
Możemy w końcu uruchomić nasz program.
Posiada on niewiele ale bardzo użytecznych opcji. Na początku najlepiej stworzyć folder z naszą grafiką mapy ponieważ program tworzy tilesy tam gdzie ten plik się znajduje a chyba nie chcemy mieć kilku tysięcy plików gdzieś gdzie nie chcemy (np. na pulpicie) 😉
Po wgraniu grafiki do programu (Open File) mozemy wybrać jaki maksymalny zoom będzie mapa posiadała. W zakładce Processing możemy też wybrać jakość generowanych tilesów oraz wersję API google maps, z której ma korzystać cała mapa (polecam v3).
Jak już ustawimy wszystkie opcje klikamy na Create. Program w ciągu kilku minut (zależnie od wielkości mapy) wygeneruje nam wszystkie tilesy oraz plik html z kodem, który po uruchomieniu od razu pokaże nam naszą mapę.
Wynik pracy tego programu można zobaczyć tutaj. Jest to mapa stworzona na potrzeby gry Kroniki Fallathanu 2. Wygenerowaną mapę bardzo łatwo umieścić na stronie (wystarczy skopiować tylko kod Javascript z wygenerowanego pliku html) przez co cała operacja zajmuje naprawdę bardzo mało czasu.
Ważne linki: