Menjadi Kreatif Dengan Google Maps API

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

Anda telah mendesain situs web baru yang berkilau; hati-hati memilih warna, tipografi, dan foto untuk secara sempurna mencerminkan branding perusahaan. Maka klien Anda meminta Anda untuk menambahkan peta. Tentu, Anda bisa menggunakan peta building 'wizard', seperti yang ada di setiap akun Google. Tapi, coba perhatikan, fungsi mereka terbatas dan terlihat sangat generik!

Google Maps API, di sisi lain, memberi Anda kebebasan untuk membuat peta yang sepenuhnya disesuaikan, yang dapat melakukan berbagai hal keren. Peta Sejarah Portsmouth adalah situs yang saya buat baru-baru ini menggunakan API ini.

Map I created using the Google maps API — Peta sejarah Portsmouth yang saya buat menggunakan Google maps API.

Rangkaian tutorial ini akan menunjukkan cara membuat peta khusus menggunakan Google maps API. Ini akan melibatkan mengotori tangan Anda dengan sedikit JavaScript, tetapi itu akan sepadan.

Tutorialnya akan mencakup segala macam hal. Untuk beberapa nama: warna peta khusus, menu dan penanda; membawa desain peta Anda sendiri (misalnya peta yang digambar) menjadi nyata dengan melapisnya ke peta google yang dapat diperbesar; menghubungkan ke API Flickr; optimasi gambar; desain responsif; optimasi kode dan validasi. Atau, dengan kata lain, pada saat Anda selesai, Anda tidak hanya dapat membuat peta yang indah, Anda juga akan melihat banyak hal yang relevan untuk membangun situs web apa pun.

Skenario

Tutorial ini menggunakan skenario perusahaan Inggris yang mempromosikan festival musik. Gambar "Produk Akhir" di atas menunjukkan jenis hal yang kita tuju. Lihatlah demo.

Catatan: Hanya penanda Glastonbury yang 'aktif' dalam contoh ini.

Sebelum memulai, Anda mungkin ingin mengunduh file yang terkait dengan tutorial ini. Saya telah menyertakan file html terpisah untuk setiap aktivitas.

Lagi Pula Apa itu API?

API, atau Application Programming Interface, adalah cara mewah untuk mengucapkan sekumpulan perintah (misalnya fungsi) perusahaan (misalnya Facebook, Twitter, You Tube, Google) publikasikan. Idenya adalah Anda dapat menggunakan perintah ini untuk membuat versi konten mereka yang sangat disesuaikan. Misalnya, dalam kasus Google Maps API, 'konten' adalah peta, sedangkan dalam kasus Flickr API, 'konten' adalah foto.

Ketika orang-orang membicarakan tentang 'mash-up' mereka berarti mereka telah menggunakan API dari dua atau lebih perusahaan untuk menggabungkan konten, misalnya membuat gambar dari Flickr muncul di peta Google. Ada ribuan API ini di sekitar; lihatlah Web Programmable untuk info lebih lanjut.

Kita akan melihat API Flickr di tutorial selanjutnya, tetapi untuk memulai dengan akan tetap fokus pada Google Maps API. Ini akan memungkinkan Anda melakukan berbagai hal, termasuk menyesuaikan warna, penanda peta, gaya kotak pop-up, tingkat detail, dan tingkat zoom. Belum lagi membuat peta melakukan hal-hal keren, seperti menampilkan data langsung, mengelompokkan penanda, merencanakan rute, menggambar hamparan kustom, data yang secara dinamis terungkap.... daftarnya tidak ada habisnya!

Memulai Dengan Google Maps

Dengan risiko menunjukkan hal yang sudah jelas, untuk memulai Anda memerlukan akun Google. Jika saat ini Anda tidak memilikinya, kunjungi Google dan daftar.

Berbekal akun Google Anda, kini Anda dapat menjelajah ke halaman Google maps API. Tandai halaman ini; Anda akan menjadi sangat akrab dengannya. Area utama adalah: -

Developer's Guide: Cuplikan kode yang menunjukkan kepada Anda cara menggunakan fungsi API untuk melakukan hal-hal tertentu.
Referensi API: Daftar referensi lengkap semua fungsi dalam API. Gunakan ini sebagai semacam 'daftar belanja' dari apa yang dapat Anda lakukan dengan menggunakan API. (Tapi ingat ada pustaka tambahan yang memungkinkan Anda melakukan lebih banyak lagi. Kita akan membahas ini nanti).

Sebelum melangkah lebih jauh, Anda juga memerlukan kunci API (urutan panjang huruf dan angka, unik untuk Anda). Dapatkan kunci API Anda di sini.

Membuat Peta Pertama Anda

OK, Anda siap untuk mulai membangun.

google-maps-api-activity3 — Unduh file sumber atau periksa versi siaran langsung

Untuk membuat peta yang tersedia berfungsi, ganti tempat yang bertuliskan ‘YOUR_API_KEY_GOES_HERE’ dengan kunci API Anda sendiri. Peta Anda harus menyerupai peta yang ditunjukkan di atas.

Prinsip dasar dari kode ini adalah ia menciptakan div (disebut festival-map) di mana JavaScript memuat peta. Saya telah menambahkan komentar di kode untuk menjelaskan cara kerjanya, tetapi sebaiknya menyoroti bit utama.

Kode pertama mendeklarasikan aplikasi Anda sebagai HTML5 menggunakan deklarasi <!Doctype html> .

Kemudian mengatur styling untuk peta; bit-bit antara <style type="text/css"> dan </style> tag dan . Anda dapat menyesuaikan styling pada # festival-map id tergantung di mana Anda ingin meletakkan peta Anda. Jika Anda menginginkan peta 'layar penuh', kemudian atur lebar dan tingginya menjadi 100 persen dan hapus marginnya.

Kemudian, melewati JavaScript untuk beberapa saat, kode di antara tag body membentuk objek html kosong, yaitu div (festival-map) untuk menahan peta. Ini bertindak sebagai semacam 'place holder', di mana JavaScript memuat peta.

1	<div id="festival-map"></div>

OK - sekarang melihat JavaScript - kode pertama terhubung ke kunci google maps API Anda.

1	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&sensor=true"></script>

Kemudian meluncurkan ke JavaScript yang membuat peta. Pengingat cepat: fungsi JavaScript (misalnya loadFestivalMap) adalah sekumpulan perintah yang hanya dijalankan ketika dipanggil oleh beberapa kode lain. Ini mungkin terlihat rumit, tetapi sebenarnya hanya melakukan beberapa hal -

Opsi konfigurasi (festivalMapOptions) peta (misalnya lintang dan bujur, tingkat zoom, dll) ditetapkan, dan variabel JavaScript kosong (festivalMap) dibuat yang akan segera ditentukan oleh peta. (Tips: itouchmap adalah situs yang berguna untuk mencari koordinat garis lintang dan bujur dari lokasi manapun.)
Kemudian fungsi loadFestivalMap dipicu untuk dijalankan oleh baris ini:google.maps.event.addDomListener(window, 'load', loadFestivalMap);
Fungsi ini membuat peta, menetapkannya ke variabel JavaScript yang dibuat untuknya (mis. FestivalMap). Saat melakukan ini, itu juga menerapkan opsi konfigurasi dan memuat peta ke div festival-map yang dibuat untuk menahannya.
Akhirnya, fungsi loadMapMarkers dipicu ke dijalankan oleh baris terakhir dari fungsi loadFestivalMap.

Jika ini tidak masuk akal, baca komentar-komentar dalam versi lengkap dari kode ketika mereka menjelaskan lebih lanjut.

Gambar sebagai Penanda Peta

Sekarang Anda harus memiliki peta dan berjalan, dan dengan sedikit keberuntungan Anda belum terlalu bingung dengan JavaScript! Dengan asumsi semuanya baik-baik, kita bisa mulai membuat peta terlihat sedikit lebih menarik.

Sangat mudah untuk menggunakan gambar Anda sendiri sebagai penanda peta. Dengan cara yang sama dengan cara Anda menetapkan opsi properti untuk peta itu sendiri (misalnya pusat, zoom, dll. Seperti yang kami lakukan di atas), Anda juga dapat mengubah properti penanda peta. Untuk menggunakan gambar yang berbeda sebagai penanda peta, Anda hanya perlu mengatur properti icon penanda peta Anda. (Jika Anda tertarik, google maps API - bagian penanda daftar semua properti penanda peta, metode dan acara yang dapat Anda gunakan).

Biasanya penanda peta adalah .png karena mereka memungkinkan Anda memiliki bentuk tidak beraturan dengan latar belakang transparan.

Kita juga perlu menetapkan area ‘yang dapat diklik’ untuk setiap penanda guna memastikan sedikit ‘gambar’ dari .png dapat diklik dan sedikit transparan tidak. Ini sangat penting jika penanda tumpang tindih.

Anda terlebih dahulu membuat gambar ikon peta (markerIconGlastonbury), dan kemudian membuat bentuk ikon peta (markerShapeGlastonbury), dan akhirnya Anda menghubungkan keduanya ke penanda peta Anda (markerGlastonbury).

//Setting the position of the Glastonbury map marker.
var markerPositionGlastonbury = new google.maps.LatLng(51.159803, -2.585585);

//Setting the icon to be used with the Glastonbury map marker.
var markerIconGlastonbury = {
 url: 'icons/icon_glas_uk.png',
 //The size image file.
 size: new google.maps.Size(225, 120),
 //The point on the image to measure the anchor from. 0, 0 is the top left.
 origin: new google.maps.Point(0, 0),
 //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
 anchor: new google.maps.Point(189, 116)
};

//Setting the shape to be used with the Glastonbury map marker.
var markerShapeGlastonbury = {
 coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56],
 type: 'poly'
};

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:102
});

Anda dapat mengunduh file html lengkap dari bagian atas halaman ini, atau melihat versi live. Untuk saat ini, saya baru saja menambahkan satu penanda peta ... jelas saya akan menambahkan lebih banyak lagi!

Petunjuk: Untuk mendapatkan koordinat bentuk ikon peta, saya memasukkan gambar ikon ke halaman web sementara di Dreamweaver, dan kemudian menggunakan Alat Hotspot Polygon untuk mendapatkan koordinat, dan kemudian salin koordinat ini kembali ke halaman peta utama saya.

Catatan Singkat Tentang Z-indeks

Elemen, seperti penanda peta, dapat memiliki koordinat x, y, dan z. Indeks-z adalah kedalamannya. Ini menentukan bagaimana elemen 'ditumpuk' di atas satu sama lain, dan karenanya bagaimana mereka tumpang tindih.

Jika x dan y koordinat dari elemen yang sama, maka elemen dengan z-indeks lebih tinggi yang ditampilkan di atas unsur-unsur dengan z-indeks lebih rendah. (Z-index hanya berfungsi pada elemen yang diposisikan, misalnya relatif, tetap atau mutlak).

Sejauh ini peta terlihat baik-baik saja karena secara default Google maps API memberikan elemen yang muncul lebih rendah ke bawah layar indeks-z yang lebih tinggi, sehingga mereka muncul di atas item sedikit lebih jauh ke atas layar. Misalnya. ikon Isle of Wight berada di atas ikon festival Glastonbury dan ikon Reading (lihat gambar di bawah).

Nanti dalam tutorial ini kita akan melihat bagaimana Anda dapat mengubah z-indeks untuk memanipulasi bagaimana penanda peta ditampilkan.

Mengubah Warna dan Tingkat Detail

Meskipun peta mulai terbentuk, peta default tidak benar-benar sesuai dengan efek keseluruhan yang ingin saya capai. Untungnya, sangat mudah menggunakan opsi API 'gaya' untuk menyesuaikan tampilan peta.

Saya juga harus mengatakan pada titik ini bahwa saya hanya mengambil beberapa festival musik untuk mengilustrasikan contoh ini. Ini agak acak, dan pilihan saya tidak mencerminkan pendapat saya - baik untuk atau melawan - setiap festival!

Langkah 1

Gunakan wizard JSON untuk latihan bagaimana Anda ingin peta Anda terlihat. Anda dapat mengubah warna dari hampir semuanya, menambah dan menghapus detail, mengatur isi warna dan geometri secara independen dll. Layak menghabiskan sedikit waktu untuk terbiasa dengan cara kerjanya. (Jika Anda bertanya-tanya, JSON hanyalah cara memformat informasi sehingga komputer dapat membacanya.)

Langkah 2

Saat Anda puas dengan gaya yang ditampilkan di pratinjau wizard JSON, klik tombol Show JSON dan salin kode.

Langkah 3

Kembali ke dokumen html Anda, tambahkan variabel tepat setelah tag JavaScript pembuka untuk menyimpan informasi ini, lalu tempelkan kode.

//First, we read in the data describing style.
var style_festival = [
 {
 "featureType": "administrative",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "poi",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "transit",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape",
 "stylers": [
 { "color": "#FFE200" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "visibility": "on" },
 { "color": "#4f92c6" }
 ]
 }
];

Langkah 4

Anda perlu mendapatkan peta untuk memperlakukan informasi yang baru saja Anda tambahkan sebagai gaya peta. Gunakan StyledMapType untuk melakukannya.

1	//Then we use this data to create the styles.
2	var styled_festival = new google.maps.StyledMapType(style_festival, {name: "Festival style"});

Langkah 5

Akhirnya, Anda perlu menetapkan gaya baru ke peta Anda untuk 'mengaktifkan' gaya.

1	festivalMap.mapTypes.set('map_styles_festival', styled_festival);
2	festivalMap.setMapTypeId('map_styles_festival');

Silakan gunakan tautan di awal tutorial ini untuk mengunduh salinan kode untuk peta sejauh ini, atau lihat demo langsung untuk bagian tutorial ini. Saya sebenarnya menambahkan dua gaya. Satu diaktifkan langsung, dan yang lainnya akan diaktifkan ketika peta diperbesar untuk memberikan tingkat detail yang lebih tinggi. (Ini dijelaskan lebih lanjut di bawah.)

Saya juga tidak bisa menolak menambahkan latar belakang pada titik ini :) Lihatlah pemilih css body untuk melihat bagaimana saya melakukan ini.

Pop up Boxes dan Zoom Dinamis

Oke, sekarang saatnya membuat peta benar-benar melakukan sesuatu! Anda dapat menggunakan hamparan Info Jendela bawaan, tetapi tidak terlihat fantastis dan tidak mudah disesuaikan. Jadi, sebaliknya, kita akan menggunakan pustaka Infobox.

Langkah 1

Unduh salinan pustaka Infobox. Buka zipnya, dan simpan dalam folder yang dekat dengan peta Anda. Kemudian tambahkan baris ini di dekat bagian atas file html Anda.

1	<script src="infobox/infobox.js" type="text/javascript"></script>

Langkah 2

Tambahkan z-indeks untuk setiap penanda peta sehingga yang lebih dekat dengan bagian bawah layar muncul di atas yang lebih tinggi. (yaitu lebih dekat ke bagian bawah layar penanda adalah, semakin tinggi indeks-z seharusnya.) Semua akan terungkap kemudian mengapa Anda melakukan ini! Sebagai contoh -

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:107
});

Langkah 3

Tambahkan kode berikut setelah setiap penanda peta. Silakan baca komentar di dalam kode untuk melihat apa yang dilakukannya.

//Creates the information to go in the pop-up info box.
var boxTextGlastonbury = document.createElement("div");
boxTextGlastonbury.style.cssText = pop_up_info;
boxTextGlastonbury.innerHTML = '<span class="pop_up_box_text"><img src="content/glastonbury.jpg" width="400" height="285" border="0" /></span>';

//Sets up the configuration options of the pop-up info box.
var infoboxOptionsGlastonbury = {
 content: boxTextGlastonbury
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-241, 0)
 ,zIndex: null
 ,boxStyle: {
 background: "url('infobox/pop_up_box_top_arrow.png') no-repeat"
 ,opacity: 1
 ,width: "430px"
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "icons/button_close.png"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
};

//Creates the pop-up infobox for Glastonbury, adding the configuration options set above.
infoboxGlastonbury = new InfoBox(infoboxOptionsGlastonbury);

//Add an 'event listener' to the Glastonbury map marker to listen out for when it is clicked.
google.maps.event.addListener(markerGlastonbury, "click", function (e) {
 //Open the Glastonbury info box.
 infoboxGlastonbury.open(festivalMap, this);
 //Changes the z-index property of the marker to make the marker appear on top of other markers.
 this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
 //Zooms the map.
 setZoomWhenMarkerClicked();
 //Sets the Glastonbury marker to be the center of the map.
 festivalMap.setCenter(markerGlastonbury.getPosition());
});

Langkah 4

Dalam kode di atas, Anda memanggil fungsi setZoomWhenMarkerClicked. Ini akan memperbesar peta ketika seseorang mengklik penanda. Tetapi tidak banyak yang akan terjadi sampai Anda membuat fungsi ini! Ini adalah fungsi yang perlu Anda buat -

function setZoomWhenMarkerClicked(){
var currentZoom = festivalMap.getZoom();
 if (currentZoom < 7){
 festivalMap.setZoom(7);
 }
}

Langkah 5

Saat peta diperbesar, kemungkinan Anda ingin menampilkan lebih banyak detail di peta Anda. Ini dilakukan dengan menambahkan event listener dan menggunakan metode getZoom untuk terus memeriksa apakah zoom telah diubah. Jika telah ditingkatkan (di atas level 6), metode setMapTypeId digunakan untuk mengatur gaya kedua (lebih rinci) yang didefinisikan di atas.

//Continuously listens out for when the zoom level changes. This includs when the map zooms when a marker is clicked.
google.maps.event.addListener(festivalMap, "zoom_changed", function() {
 var newZoom = festivalMap.getZoom();
 //If the map is zoomed in, the switch to the style that shows the higher level of detail.
 if (newZoom > 6){
 festivalMap.setMapTypeId('map_styles_festival_zoomed');
 }
 //Otherwise the map must be zoomed out, so use the style with the lower level of detail.
 else {
 festivalMap.setMapTypeId('map_styles_festival');
 }

});

Langkah 6

Style infobox Anda menggunakan css agar terlihat cantik.

//Variable containing the style for the pop-up infobox.

var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";

Langkah 7

Ketika sebuah infobox telah dibuka, penanda peta dibawa ke depan. Namun, jika Anda menutup infobox dan kemudian memperbesar peta ke posisi semula, penanda tetap berada di depan. Ini bisa terlihat aneh.

Pada Langkah 1 Anda mengatur indeks-z untuk setiap penanda. Anda dapat menggunakan ini sekarang untuk memperbaiki masalah ini. Anda perlu membuat fungsi (mis. ResetZindexes) yang me-reset z-indeks ke nilai aslinya, dan kemudian menambahkan panggilan ke fungsi ini (yaitu resetZindexes();) ke infobox.js untuk memicu fungsi untuk berjalan ketika infobox jendela ditutup.

Pergi ke link di bagian atas halaman ini untuk salinan kode untuk situs sejauh ini, atau lihatlah versi live dari bagaimana seharusnya terlihat sekarang. Saya hanya menambahkan munculan untuk Glastonbury. Jangan ragu untuk menambahkan yang lain sendiri!

Spanduk dan Navigasi yang Disesuaikan

Kita hampir di sana dengan menyesuaikan tampilan peta, tetapi sebelum menyebutnya sehari, kita harus menambahkan beberapa kontrol navigasi.

Google maps memiliki 12 area tempat Anda dapat menambahkan kontrol peta, spanduk, dll. Anda dapat sepenuhnya menyesuaikan area ini, menambahkan html apa pun yang Anda inginkan.

Kami akan menambahkan spanduk dan navigasi khusus di sisi kanan peta.

Langkah 1

Untuk memulai, pertama-tama tentukan fungsi untuk membuat menu. Ekstrak kode ini agak panjang...

//Function that creates the control panel area, ie. the map title and the 2 buttons just beneath it.
function createControlPanel (controlPanelDiv){
 controlPanelDiv.style.padding = '0px';
 controlUI = document.createElement('div');
 controlUI.style.border='0px solid white';
 controlUI.style.margin='10px';
 controlUI.style.paddingTop='11px';
 controlUI.style.paddingBottom='5px';
 controlUI.style.paddingLeft='0px';
 controlUI.style.paddingRight='0px';
 controlUI.style.width='245px';
 controlUI.style.height='419px';
 controlPanelDiv.appendChild(controlUI);

 //Map title
 titleBar = document.createElement('div');
 titleBar.style.backgroundColor = '#89CBED';
 titleBar.style.height='255px';
 titleBar.style.width='245px';
 titleBar.style.marginTop='0px';
 titleBar.style.marginBottom='0px';
 titleBar.style.marginLeft='0px';
 titleBar.style.marginRight='0px';
 titleBar.style.paddingTop='6px';
 titleBar.style.paddingBottom='2px';
 titleBar.style.paddingLeft='0px';
 titleBar.style.paddingRight='0px';
 titleBar.style.borderTopLeftRadius='5px';
 titleBar.style.borderTopRightRadius='5px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.cssFloat='left';
 titleBar.innerHTML = '<div align="center"><img src="icons/map_title.png" width="230" height="252" border="0"/></div>';
 controlUI.appendChild(titleBar);

 yellowStripe = document.createElement('div');
 yellowStripe.style.backgroundColor = '#FFFF00';
 yellowStripe.style.height='2px';
 yellowStripe.style.width='245px';
 yellowStripe.style.marginTop='3px';
 yellowStripe.style.marginBottom='3px';
 yellowStripe.style.marginLeft='0px';
 yellowStripe.style.marginRight='0px';
 yellowStripe.style.paddingTop='0px';
 yellowStripe.style.paddingBottom='0px';
 yellowStripe.style.paddingLeft='0px';
 yellowStripe.style.paddingRight='0px';
 yellowStripe.style.cssFloat='left';
 yellowStripe.style.fontFamily='Georgia, serif';
 yellowStripe.style.fontSize='14px';
 controlUI.appendChild(yellowStripe);

 //'Smaller' events button.
 smallEvents = document.createElement('div');
 smallEvents.style.height='108px';
 smallEvents.style.width='129px';
 smallEvents.style.marginTop='0px';
 smallEvents.style.marginBottom='0px';
 smallEvents.style.marginLeft='0px';
 smallEvents.style.marginRight='0px';
 smallEvents.style.paddingTop='0px';
 smallEvents.style.paddingBottom='2px';
 smallEvents.style.paddingLeft='0px';
 smallEvents.style.paddingRight='0px';
 smallEvents.style.cssFloat='left';
 smallEvents.innerHTML = '<div align="center" onClick="handelRequests(\'small_events\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_small_event.png" width="128" height="107" border="0"/></div>';
 controlUI.appendChild(smallEvents);

 //Umbrella button
 brolly = document.createElement('div');
 brolly.style.height='149px';
 brolly.style.width='94px';
 brolly.style.marginTop='0px';
 brolly.style.marginBottom='0px';
 brolly.style.marginLeft='0px';
 brolly.style.marginRight='0px';
 brolly.style.paddingTop='0px';
 brolly.style.paddingBottom='2px';
 brolly.style.paddingLeft='0px';
 brolly.style.paddingRight='0px';
 brolly.style.cssFloat='left';
 brolly.innerHTML = '<div align="center" onClick="handelRequests(\'rainfall\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_brolly.png" width="93" height="148" border="0"/></div>';
 controlUI.appendChild(brolly);

}

Catatan singkat tentang gaya: Kode di atas menggunakan properti style elemen untuk menentukan gayanya menggunakan JavaScript. Untuk mengonversi properti CSS ke notasinya JavaScript, Anda hanya perlu mengingat bahwa properti yang tidak memiliki tanda hubung tetap sama, sedangkan yang dengan tanda hubung dikonversi ke camelCase, mis. background-image menjadi backgroundImage. Pengecualian adalah float, yang menjadi cssFloat.

Langkah 2

Kemudian, buat div untuk menahan menu, dan tambahkan menu ke div ini dengan memanggil fungsi yang baru saja Anda buat di langkah 1.

//Create control panel (ie. site title and 2 buttons) which appears on the right-hand side.

var controlPanelDiv = document.createElement('div');

var festivalMapControlPanel = new createControlPanel(controlPanelDiv, festivalMap);

Langkah 3

Kemudian atur properti kontrol peta Anda untuk menambahkan menu ke lokasi yang relevan, dalam hal ini RIGHT_TOP.

1	//Add the control panel and reset button (created previously) to the map.
2	festivalMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlPanelDiv);

Langkah 4

Sekarang Anda harus memiliki sesuatu yang tampak seperti menu khusus yang ditampilkan di sisi kanan peta Anda. Jadi semua yang harus dilakukan adalah membuat menu Anda melakukan sesuatu...

Selama tutorial berikutnya kita akan mendapatkan tombol Smaller Events untuk menampilkan foto dari Flickr, dan tombol payung untuk menampilkan overlay peta curah hujan sketched. (Sebuah klise yang saya tahu, tetapi kita mendapatkan sedikit hujan di sini selama bulan-bulan musim panas!)

Jadi untuk mendapatkan sesuatu yang berfungsi di tutorial ini, saya telah mengulangi langkah-langkah di atas untuk juga menambahkan tombol Reset ke area RIGHT_BOTTOM. Ini termasuk kode pembungkus di sekitar tombol Reset untuk memanggil fungsi handelRequests.

//Function that creates the 'Reser map' button.
function createResetButton (resetButtonDiv){
 resetButtonDiv.style.padding = '0px';
 controlUI2 = document.createElement('div');
 controlUI2.style.backgroundColor = '#ffffff';
 controlUI2.style.borderRadius='5px';
 controlUI2.style.margin='10px';
 controlUI2.style.paddingTop='2px';
 controlUI2.style.paddingBottom='2px';
 controlUI2.style.paddingLeft='2px';
 controlUI2.style.paddingRight='5px';
 controlUI2.style.textAlign='center';
 controlUI2.style.width='148px';
 controlUI2.style.height='31px';
 controlUI2.innerHTML = '<div onClick="handelRequests(\'reset\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" ><img src="icons/button_reset.png" width="148" height="31" border="0"/></div>';
 resetButtonDiv.appendChild(controlUI2);
}

Langkah 5

Fungsi handelRequests melakukan beberapa hal - lihat komentar di kode.

//Function that is called when either the 'smaller events', unbrella or the 'reset map' buttons are clicked.
function handelRequests (buttonPressed) {
if (buttonPressed === "reset"){
 //Resets the zoom, map position and marker z-indexes back to their orignal position. Also closes all infoboxes currently open.
 festivalMap.setZoom(festivalMapZoom);
 festivalMap.setCenter(festivalMapCenter);
 resetZindexes();
 //This is a function I've created that closes any info boxes that are open.
 closeAllInfoboxes();
}
else if (buttonPressed === "small_events"){
 alert("This button will do something useful in a later tutorial!");
}
else if (buttonPressed === "rainfall"){
 alert("This button will do something useful in a later tutorial!");
}
}

Anda bisa mendapatkan salinan lengkap dari file html untuk bagian tutorial ini dari bagian atas halaman ini, atau lihat contoh langsung. Hanya penanda peta Glastonbury yang 'aktif dalam contoh ini.

Apa Selanjutnya?

Itu saja untuk tutorial ini! Semoga Anda sekarang memiliki sesuatu yang bekerja yang secara samar menyerupai gambar di bagian atas halaman ini. Jika ada yang salah, lihat file yang dapat diunduh yang tersedia di GitHub. Saya telah memasukkan kode dalam file terpisah untuk setiap bagian dari tutorial ini, jadi Anda harus dapat mengetahui di mana semua kesalahan itu terjadi.

Tutorial berikutnya akan melihat bagaimana Anda dapat menggunakan Google Maps API untuk membawa peta Anda sendiri (misalnya peta yang digambar atau bersejarah) ke kehidupan, menjadikannya dapat diperbesar dan interaktif.

Image Credits

Foto-foto yang digunakan dalam tutorial ini semuanya telah dirilis di bawah lisensi Creative Commons.