Google Maps API dan Custom Overlay

() translation by (you can also view the original English article)

Dalam tutorial sebelumnya, kami memperhatikan bagaimana Anda dapat menambahkan penanda dan menyesuaikan warna dan menu peta Google menggunakan API layanan. Tutorial ini mengambil langkah lebih jauh, menjelaskan bagaimana Anda dapat membuat peta kustom Anda sendiri dan menghamparkannya ke peta Google (seperti peta 1896 saya di Portsmouth).

Dalam tutorial ini, kami akan menambahkan hamparan 'perkiraan cuaca' ke peta yang dibuat sebelumnya. Peta cuaca yang saya gunakan adalah fiktif, tetapi teknik yang tercakup akan memberi Anda kebebasan untuk membuat segala macam hal menarik! Anda akan dapat membangun peta bersejarah, peta digambar khusus, close up area spesifik seperti kampus universitas - daftar yang tak ada habisnya!

Google maps terdiri dari banyak ubin terpisah. Screenshot diambil dari situs web 'Tiles à la Google Maps' yang sangat bagus.

Beberapa hal yang perlu Anda ketahui sebelum memulai:

Peta Google dibuat menggunakan banyak gambar 'ubin' (lihat gambar di atas). Dengan kata lain, peta dibagi menjadi jaringan tak terlihat dan setiap kotak persegi adalah file gambar terpisah dari 256x256 piksel.
Anda perlu satu set ubin gambar untuk setiap tingkat zoom. Tingkat zoom adalah angka, dari nol ke atas, yang berubah saat Anda memperbesar dan memperkecil peta (lihat gambar di atas).
Hamparan peta Anda dimulai dengan gambar yang sangat besar (jpeg atau png), kemudian Anda ‘mengirisnya 'menjadi ubin. Ini adalah proses berulang, dalam arti bahwa gambar diiris sekali untuk membuat satu set ubin untuk tingkat zoom pertama, dan kemudian diiris lagi menjadi segmen yang lebih kecil untuk membuat kumpulan ubin kedua untuk tingkat zoom berikutnya, dan seterusnya.

Tutorial ini menjelaskan setiap langkah, termasuk perangkat lunak yang tersedia (untungnya!) untuk mengotomatisasi hal-hal dan membuat hidup jauh lebih mudah. File sumber untuk setiap langkah tersedia dalam paket download.

Men-download Template

Untuk memulai, langkah pertama adalah membuat templat di mana Anda dapat membuat hamparan sendiri.

Template image into which you create your map This image is actually 9984x11776 pixels if you take a look at it in the tutorial files — Gambar template di mana Anda membuat peta Anda. Gambar sebenarnya adalah 9984x11776 piksel

Tujuan Anda adalah membuat template di Photoshop (atau aplikasi grafis yang setara) yang ukuran dan bentuknya persis sama dengan peta Google yang akan Anda taruh di atasnya, saat berada pada level zoom tertinggi. (maptiler.org berguna jika Anda tidak yakin apa tingkat zoom tertinggi yang Anda butuhkan).

Untuk melakukan ini, Anda dapat menyimpan peta template menggunakan mashup maptiler dan kemudian memperbesarnya di Photoshop ke tingkat zoom maksimum yang Anda inginkan. Sebagai contoh:

Gunakan aplikasi grafik Anda untuk membuka gambar peta template yang telah Anda simpan.
Pergi ke situs web Google Maps Tiles dan ambil screenshot dari segmen peta Google Anda, pada tingkat zoom maksimum yang Anda butuhkan.
Tempel screenshot ke file Photoshop Anda.
Kemudian perbesar gambar peta template Anda sehingga tepat sejajar dengan segmen peta diperbesar yang sesuai.
Selanjutnya, hapus segmen yang diperbesar. Kualitas peta template Anda tidak akan bagus, tetapi ini tidak masalah karena Anda hanya membutuhkannya untuk garis besar dan Anda akan menghapusnya pada akhirnya.

Tip: Opsi lain adalah Google Maps Downloader, tetapi harap perhatikan Google T & C. Juga, opsi ini tidak layak untuk peta besar dan terperinci; peta UK yang diperbesar ke level 12 akan terlalu besar untuk dibuka di Photoshop.

Pada tahap ini, saya tidak akan membuatnya sulitl! Jadi, dengan sedikit perubahan pada tutorial sebelumnya, saya telah mengubah tingkat pembesaran maks dari 12 menjadi 10 untuk memberi kita ukuran file yang dapat dikelola agar berfungsi.

Membuat Peta Anda Sendiri

Setelah Anda memiliki peta jpg menggunakan proses yang dijelaskan di atas, buka di Photoshop, atau aplikasi grafis pilihan Anda.

My custom overlay Not exactly a showcase of artistic talent I know but it does the job for this demo Yours will look amazing Actual size 7248x10929 png file — Hamparan khusus saya. Bukan hanya sebuah karya bakat artistik yang saya tahu, tetapi itu melakukan pekerjaan untuk demo ini. Peta Anda akan terlihat luar biasa. (Ukuran sebenarnya file png 7248x10929)

Anda akan menggunakan gambar ini sebagai template dan menggambar peta Anda sendiri di atasnya. Ini untuk memastikan bahwa peta Anda sejajar dengan peta Google.

Kunci lapisan template peta Anda.
Tambahkan layer-layer baru.
Buat sesuatu yang luar biasa. (Sebenarnya, jangan terlalu terbawa untuk memulai. Sebenarnya, itu ide yang bagus untuk membuat sesuatu yang mendasar, seperti peta cuaca saya, dan ikuti tutorial selanjutnya untuk merasakan apa yang terjadi. Kemudian buat sesuatu yang luar biasa!)
Sembunyikan layer template peta.
Simpan peta Anda sebagai png atau jpg (jika Anda memiliki bagian transparan, seperti laut dalam tutorial ini, kemudian pergi untuk png).

Lihatlah gambar peta cuaca yang saya buat pada tahap ini, yang tersedia dalam pengunduhan sumber.

Mengiris Peta Anda

Ada beberapa cara Anda dapat mengiris gambar Anda untuk membuat ubin peta. Jika Anda ingin sedikit info background tentang apa yang Anda lakukan, baca terus. Jika tidak, jika Anda tidak peduli mengapa atau bagaimana cara kerjanya, lewati saja ke bagian berikutnya!

Sistem Proyeksi

Sistem proyeksi, dalam arti geografis, adalah bagaimana peta datar dibuat dari objek bulat, yaitu bola dunia. Ada berbagai macam formula dan algoritma yang digunakan untuk mencapai hal ini. Yang perlu Anda ketahui adalah bahwa sistem proyeksi yang berbeda menghasilkan peta datar dunia yang berbeda.

Mercator projection top and the GallPeters projection bottom create a quite different two dimensional maps — Proyeksi Mercator (atas) dan proyeksi Gall-Peters (bawah) membuat peta dua dimensi yang sangat berbeda. (Grid pada gambar di atas tidak terkait dengan ubin peta Google, yang berbentuk persegi).

Untuk membuat tumpang tindih untuk peta Google, Anda perlu menggunakan sistem ‘Spherical Mercator’ yang menggunakan proyeksi Mercator. Ini didefinisikan sebagai EPSG: 900913 atau EPSG: 3857. Untuk mengetahui lebih lanjut tentang sistem proyeksi, lihat halaman web Tiles à la Google Maps.

Menemukan Setiap Sisi Peta Anda

Sebelum Anda dapat membuat ubin, Anda perlu mengetahui posisi sisi utara, selatan, barat, dan timur peta Anda. Karena Anda menggunakan sistem ‘Spherical Mercator’, ini harus dalam meter bulat sebagai lawan lintang atau bujur.

How to read the output on the Mashup Top-left number west side top-right number south-side bottom-left number east side bottom-right number north side — Cara membaca output di situs Mashup: Nomor kiri atas = sisi barat, nomor kanan atas = sisi selatan, nomor kiri bawah = sisi timur, angka kanan bawah = sisi utara.

Anda dapat menemukan nilai posisi ini menggunakan mashup ini. Saya telah menemukan bahwa metode termudah adalah memperbesar dan menemukan satu sisi dalam satu waktu. Jadi temukan nilai untuk sisi barat peta Anda, buat catatan, lalu temukan nilai untuk sisi selatan, dan seterusnya.

Setelah Anda menemukan empat nilai ini, Anda sekarang dapat 'mengiris' peta Anda menjadi ubin. Ada beberapa opsi yang tersedia.

Mengiris Opsi 1: MapTiler

Untungnya, perangkat lunak MapTiler sangat mudah digunakan! Pada saat menulis tutorial ini, MapTiler memperbarui perangkat lunak mereka. Tetapi terlepas dari versi apa yang Anda download, inilah langkah-langkah dasarnya:

Download Maptiler. Atau Versi Beta yang lebih baru.
Mulai program dan pilih opsi Google maps yang kompatibel.
Kemudian tambahkan gambar peta yang Anda buat pada langkah sebelumnya.
Anda akan diminta untuk memberikan georeferensi batas-batas peta Anda, yaitu posisi dalam meter persegi dari setiap sisi yang baru saja Anda temukan. Dalam versi 0.41 (yang lebih baru dari dua versi) ini disebut sebagai Bounding Box. Hati-hati dengan pesanan yang Anda masukkan nilainya!
Ketika diminta untuk referensi/koordinat sistem spasial Anda digunakan EPSG: 3857. (Jika Anda menggunakan versi lama MapTiler versi 1 (beta), maka gunakan EPSG: 900913).
Kemudian pilih Tingkat Zoom yang ingin Anda buatkan ubin. Nilai maksimal adalah nilai yang Anda simpan di peta template Anda ketika Anda membuatnya (di atas). Halaman Google Maps Tiles a la berguna untuk mengetahui apa yang Anda butuhkan untuk nilai zoom min.
Lanjutkan ke ujung wizard dan mulai Render. Ini bisa memakan waktu cukup lama; kesempatan bagus untuk minum kopi!

Catatan: Jika Anda menggunakan versi baru MapTiler, ada gotcha; ubin peta Anda diberi tanda air. Saya menduga dalam beberapa kasus, mungkin untuk proyek Uni atau bukti-konsep teknis, ini bukan masalah. Namun, ada beberapa cara untuk mengatasi hal ini. Cara yang paling jelas adalah membeli upgrade seharga $20 saya percaya. Pilihan lainnya adalah menggunakan skrip python GDAL2Tiles. Preferensi pribadi saya adalah pergi untuk peningkatan karena saya lebih suka menghabiskan waktu saya untuk hal-hal kreatif, daripada menahan iritasi mengatur lingkungan scripting, tetapi Anda mungkin merasa berbeda.

Tip: Jika Anda mengalami masalah menggunakan perangkat lunak MapTiler, maka Forum Pengguna sangat berguna.

Opsi Mengiris 2: GDAL2Tiles

Alternatif untuk MapTiler adalah skrip GDAL2Tiles. Software MapTiler sebenarnya dibangun di atas skrip, yang berjalan melalui antarmuka prompt perintah.

cdsbfds — GDAL2Tiles adalah skrip Python yang terletak di jantung MapTiler GUI. Anda dapat menggunakan skrip ini secara langsung melalui antarmuka prompt perintah.

GDAL2Tiles menawarkan kemungkinan lebih lanjut tetapi juga sedikit lebih sulit untuk digunakan; jadi teruskan membaca jika Anda memiliki rasa petualangan!

Tahap pertama adalah menyiapkan lingkungan untuk menjalankan skrip GDAL2Tiles. Bagaimana Anda melakukannya tergantung pada sistem operasi Anda. Jika Anda menggunakan mesin Windows 32-bit (klik di sini jika Anda tidak yakin), maka Anda dapat menggunakan OSGeo4W.

Anda harus menginstal Python terlebih dahulu dan memeriksa python pada variabel path Anda.
Kemudian download OSGeo4W.
Jalankan installer dan pilih Install Advanced.
Pilih Libs dan pilih gdal dan gdal-python di paket yang dipilih.
Lanjutkan dan selesaikan instalasi.
Setelah selesai, Anda harus memiliki ikon OSGeo4W di desktop Anda. Ini adalah file batch untuk memulai command prompt.

Jika Anda menggunakan mesin Windows 64-bit (klik di sini jika Anda tidak yakin), maka pengaturannya sedikit berbeda. Instruksi ini dikutip (dengan izin baik) langsung dari blog Jaerock Kwon, yang berhak mendapatkan kredit penuh untuk memberikan instruksi terperinci seperti itu.

Instal Python dari x86-64.
Periksa python pada variabel path Anda.
Jalankan python.exe. (mis. klik pada C:\Python2\python.py) Kita harus mencari tahu versi compiler yang membangun python. Dalam kasus saya, versi Python adalah 2.7.5 dan dikompilasi dan dibangun dengan Python 2.7.5 (default, 15 Mei 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] pada win32.
Paket binary GDAL untuk mesin 64bit dapat ditemukan di http://vbkto.dyndns.org/sdk/. Pilih versi yang sesuai dalam tabel. Dalam kasus saya, rilis-1500-x64-gdal-1-10-mapserver-6-2 adalah versi yang tepat di baris "MSVC2008 (Win64) -stable" karena Python dibangun oleh 1500.
Download pemasang Generik untuk komponen inti GDAL. Dalam kasus saya - gdal-110-1500-x64-core.msi
Download instaler untuk binding python GDAL (perlu menginstal inti GDAL). Dalam kasus saya GDAL-1.10.0.win-amd64-py2.7.msi - Saya memilih ini karena 1.10.0 adalah yang terbaru dan Python saya adalah 2.7.5.
Instal komponen inti GDAL. Tidak ada pilihan untuk memilih folder tujuan untuk inti GDAL. Ini akan diinstal ke folder "C:\Program Files\GDAL".
Instal binding python GDAL.
Setelah menjilid, Anda dapat memindahkan folder GDAL di C:\Program Files ke mana pun Anda mau.
Akhirnya, klik pada menu Start dan kemudian All Programs dan kemudian GDAL. Ini harus memulai command command line prompt.

Jadi dengan asumsi Anda berhasil melewati proses (terkadang traumatis!) Dalam menyiapkan lingkungan perangkat lunak GDAL2Tiles, inilah saatnya untuk melakukan sesuatu dengannya.

gbfgr — Perintah Command dari GDAL. OSGeo4W terlihat sangat mirip dengan ini. Perintahnya sama untuk keduanya.

Apakah Anda memiliki OSGeo4W atau lingkungan GDAL, command prompt Anda akan terlihat mirip dengan screen shot di atas. Anda sekarang dapat mulai menggunakan skrip GDAL2Tiles.

Pertama, Anda perlu menavigasi ke folder tempat peta yang ingin Anda potong disimpan. (Perintah-perintah ini berguna untuk mendapatkan di mana Anda harus: dir memberi Anda daftar dari segala sesuatu di direktori saat ini, cd berarti mengubah direktori, cd.. berarti memindahkan satu tingkat ke atas pohon).

Setelah Anda berada di folder yang benar, Anda dapat mulai membuat ubin Anda. Untuk membuat peta demo dalam tutorial ini, ini adalah perintah yang saya gunakan-

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 -910307.6791052371 8109796.717743561 -gcp 7248 0 196252.07012218982 8109796.717743561 -gcp 7248 10929 196252.07012218982 6438749.514630105 part2_rainfall_map.png out.vrt

gdal2tiles.py -p mercator -z 6-10 out.vrt

Untuk menjelaskan apa yang dilakukan perintah ini, lihat page gdal_translate dan page gdal2tiles.py. Ada juga perintah warp GDAL yang terkait erat, tetapi itu tidak diperlukan dalam kasus ini. Beberapa hal yang perlu diperhatikan adalah:

Properti tiga -gcp berhubungan dengan tiga sudut peta Anda. Pasangan nilai pertama setelah setiap properti gcp berkaitan dengan dimensi dalam piksel file gambar masukan Anda, dan pasangan nilai kedua adalah koordinat dalam meter bulat (bukan garis lintang dan bujur - lihat di atas).

Jadi untuk menerapkan ini ke peta Anda:

gdal_translate -of VRT -a_srs EPSG:900913 -gcp 0 0 west north -gcp width_of_your_input_map_file_in_pixels 0 east north -gcp width_of_your_input_map_file_in_pixels height_of_your_input_map_file_in_pixels east south your_input_file_name.png your_output_file_name.vrt

gdal2tiles.py -p mercator -z zoom_range name_of_output_file.vrt

Setelah menembaki perintah kedua, komputer Anda akan menjadi hidup dan mulai memotong gambar Anda untuk membuat ubin peta. Anda mungkin ingin melihat perintah yang saya ketik ke OSGeo4W dan lingkungan GDAL jika Anda tidak yakin tentang menavigasi folder menggunakan command prompt.

Memahami Output

Terlepas dari metode yang Anda gunakan untuk membuat ubin Anda, folder yang dihasilkan akan sama.

Some of the tiles generated These are zoom level 6 the x position is 31 and the y position is the name of each file — Beberapa ubin yang dihasilkan. Ini adalah tingkat zoom 6, posisi 'x' adalah 31, dan posisi 'y' adalah nama setiap file.

Semua ubin di peta Google memiliki nilai 'x' dan 'y'. (Ya - namun sistem koordinat lain yang berbeda!) Tingkat pertama dari folder adalah tingkat zoom, kemudian di dalam bahwa tingkat folder berikutnya adalah koordinat 'x', dan di dalam itu nama file adalah koordinat 'y'.

Jika Anda melihat peta di situs web ini, Anda akan melihat bahwa nama ubin Anda cocok. Dengan kata lain, pergi ke lokasi yang Anda inginkan, sesuaikan tingkat zoom sehingga sesuai dengan nama folder Anda, kemudian lihat nilai Google 'x' dan 'y'. Anda harus melihat bahwa mereka cocok dengan subfolder dan nama file Anda untuk ubin peta yang sesuai.

Untuk memeriksa ulang ubin Anda, saya sangat menyarankan untuk menyalin satu atau dua ubin yang dihasilkan untuk tingkat zoom terendah kembali ke file peta Anda (misalnya file Photoshop) yang dibuat selama tahap sebelumnya. Pastikan bahwa mereka cocok persis di atas peta Anda. Lihatlah file sumber yang saya berikan untuk contoh ini.

Jika semuanya baik-baik saja - selamat - kerja keras sudah selesai!

Bantuan, Ubin Peta Saya Tidak Dinamai dengan Benar!

Oh dear. Ini akan terjadi jika Anda menggunakan versi perangkat lunak MapTiler yang lebih lama atau skrip GDAL2Tiles. File Anda (tetapi bukan folder) diberi nama menggunakan konvensi penamaan TMS. Jika Anda melihat ubin di page ini, Anda dapat melihat bahwa setiap ubin memiliki dua nilai x dan y; yaitu. pasangan Google dan pasangan TMS. Kita hanya perlu mengganti nama mereka ke konvensi penamaan peta Google.

Penggantian nama ini dapat dilakukan secara manual, tetapi akan memakan waktu terlalu lama untuk sebagian besar peta. Untungnya, ada skrip shell yang berguna yang akan melakukan pekerjaan untuk Anda. Anda perlu tahu sedikit tentang perintah-perintah dasar Linux, seperti bagaimana mengubah folder. Sebelum menjalankan skrip shell, buat salinan ubin Anda untuk dikerjakan.

#!/bin/sh
for thisPath in `ls -d */*/*`
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1&lt;&lt;zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

Copy dan past eskrip di atas ke Notepad dan simpan dengan nama 'ganti nama' dan ekstensi '.sh'. Saat menyimpan file ‘sh’ di notepad, pastikan ‘semua file’ di sebelah ‘simpan sebagai jenis’ dipilih, dan masukkan nama dalam tanda kutip, misalnya "rename.sh".

Jika Anda menggunakan Mac, skrip shell ini dapat dijalankan di Terminal (pilih Aplikasi kemudian Utilitas lalu Terminal).

Jika Anda menggunakan mesin Windows, maka untuk menjalankan skrip shell (atau file `.sh '), Anda perlu menggunakan Cygwin, yang merupakan lingkungan seperti Linux untuk Windows:

Downlad dan pasang Cygwin
Salin file 'rename.sh' yang baru saja Anda simpan ke folder cygwin\bin.
Mulai Cygwin.
Pindah ke folder cygwin\bin. (mis. cd berarti mengubah direktori, cd.. berarti naik satu tingkat ke atas, dan ls berarti menunjukkan file dan folder di direktori saat ini.)
Buat rename.sh dieksekusi dengan menjalankan chmod 755 rename.sh
Anda juga perlu mengonversinya menjadi file Linux sebelum menjalankannya jika tidak, Anda mendapatkan kesalahan ‘\r’ yang disebabkan oleh jeda baris. Jadi jalankan pastikan Anda masih dalam folder cygwin\bin dan jalankan d2u rename.sh
Kemudian pindah ke folder yang berisi ubin Anda (Lihat layar di atas).
Kemudian untuk menjalankan skrip, ketik rename.sh

Setelah skrip shell dijalankan, Anda dapat memeriksa apakah sudah selesai melakukan pekerjaan dengan melihat kembali file Anda. Periksa apakah nama mereka sekarang cocok dengan koordinat Google di halaman ini.

Jika Anda membandingkan nama file di folder 'Bagian 3 file' dan 'Bagian 4 file' dalam file sumber, Anda dapat melihat perbedaannya.

Mengompresi Judul Peta Anda

Untuk memastikan peta Anda berjalan semulus mungkin, Anda dapat memampatkan ubin peta Anda.

Ada berbagai utilitas kompresi gratis untuk gambar png, tetapi saya berjuang (dan gagal) untuk menemukan yang benar-benar gratis dan melakukan pekerjaan itu. Sebagai contoh, software PNGGauntlet yang populer tidak mempertahankan struktur folder, sedangkan utilitas gratis lainnya memiliki batasan pada jumlah file maksimum.

Pada akhirnya saya harus menggigit peluru dan membeli software PNGOUTWin. Ini biaya sekitar £10, yang merupakan tawar-menawar diberikan faffing sekitar yang disimpan! PNGOUTWin mempertahankan struktur file dan memungkinkan Anda memadatkan semua file Anda sekaligus.

Jika Anda menggunakan PNGOUTWin, itu sangat intuitif. Satu-satunya kata peringatan saya adalah bahwa Anda harus membuat salinan ubin Anda dan kemudian jalankan software pada salinannya. Juga, berhati-hatilah bahwa software benar-benar dimulai segera setelah Anda memilih folder!

JavaScript Magic untuk Membawanya Semua Bersama

Oke, kita hampir sampai. Yang tersisa hanyalah masalah kecil melampirkan ubin peta baru Anda yang indah ke peta Google Anda.

Basic Code

Pertama, lihat contoh sederhana dari hamparan peta berlantai (file sumber tersedia dari tautan di bagian atas halaman ini).

Jika Anda perbesar dan perkecil, hamparan peta tetap ditampilkan.

//setting up the rainfall map overlay
var rainMapOverlay = new google.maps.ImageMapType({
 getTileUrl: function(coord, zoom) {
 return 'tiles/rainfall' + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png';
 },
 tileSize: new google.maps.Size(256, 256)
});

Cuplikan ini menggunakan kelas ImageMapType untuk membuat overlay kustom. coord.x berkaitan dengan nama folder dan coord.y yang berhubungan dengan nama file. Ini digabungkan dalam kode untuk membuat jalur ke setiap ubin.

Mengaitkannya dengan Peta Festival Inggris

Ini adalah produk akhir yang Anda tuju. Untuk membuat ini, Anda dapat menggunakan teknik yang sama yang dijelaskan di dekat akhir tutorial sebelumnya.

Kita pertama kali membuat variabel (rainfallOverlayToggle) untuk menahan apakah overlay cuaca saat ini ditampilkan. Dan, kemudian membuat opsi baru di fungsi handelRequests untuk menangani situasi ketika tombol payung (brolly) diklik.

//Displays the rainfall map when the unbrella button is clicked, and removed it if is already showing.
else if (buttonPressed === "rainfall"){
//If the rainfall map is NOT showing aleady then show it ...
if (rainfallOverlayToggle === 0){
//Overlays the rainfall map on top of the Google map
festivalMap.overlayMapTypes.insertAt(0, rainMapOverlay);
//Show the weather key.
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].push(weatherKeyDiv);
rainfallOverlayToggle = 1;
}
//If the rainfall map is showing already then hide it ...
else {
//remove the overlay map.
festivalMap.overlayMapTypes.removeAt(0, rainMapOverlay);
//remove the weather key
festivalMap.controls[google.maps.ControlPosition.TOP_LEFT].pop(weatherKeyDiv);
rainfallOverlayToggle = 0;
}
}

Apa selanjutnya?

Bagus untuk mencapai akhir! Jika Anda memiliki pertanyaan apa pun, silakan tanyakan di komentar. Tutorial berikutnya akan melihat menghubungkan ke Flickr API, memungkinkan Anda untuk secara otomatis mengambil foto dari Flickr dan menampilkannya di peta Anda.

Gambar kredit

Peta proyeksi Mercator - Wikipedia
Peta proyeksi Gall-Peters - Wikipedia