Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript

Terapkan Peta Menggunakan Google Map API untuk Flash

by
Read Time:11 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca dari sepanjang sejarah Activetuts+. Tutorial ini pertama kali diterbitkan pada Mei 2009.

Dalam tutorial ini kita akan melihat bagaimana kita dapat membuat peta di Flash menggunakan Google Map API. Kita akan membahas beberapa dasar-dasar seperti memperbesar peta dan menambahkan beberapa kontrol. Kita juga akan melihat bagaimana dapat menambahkan penanda ke peta dan bagaimana dapat memuat data menggunakan file XML.


Langkah 1: Kunci API Google Map

Sebelum kita dapat mulai membuat peta di Flash, kita perlu mengatur beberapa hal. Untuk menggunakan Google Map API, Anda memerlukan Kunci API pribadi. Untuk mendapatkan ini, buka http://code.google.com/intl/nl/apis/maps/documentation/flash/ dan klik link di sisi kanan halaman "Daftar untuk Kunci API Google Maps".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 2: Daftar

Mengklik link "Mendaftar untuk Google Maps API Key" membawa ke halaman berikutnya di mana kita dapat menghasilkan Kunci API pribadi. Gulir ke bawah halaman, setujui dengan syarat dan ketentuan (Anda bisa membaca ini juga jika Anda benar-benar tertarik) dan tambahkan url situs web di mana Anda ingin menggunakan aplikasi (Anda akan memerlukan Kunci API yang berbeda untuk setiap domain tempat Anda ingin menempatkan peta). Setelah itu, klik "Hasilkan Kunci API".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 3: Simpan!

Sekarang Anda akan melihat Kunci API pribadi Anda untuk domain yang dipilih. Salin Kunci API dan rekatkan atau simpan di suatu tempat karena kita akan segera membutuhkannya.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 4: Komponen SWC Google Map

Ok, sekarang kita memiliki Kunci API tetapi kita masih membutuhkan satu hal lagi sebelum kita dapat mulai membuat peta di Flash. Kita perlu mengunduh komponen Google Map SWC. Untuk melakukannya, buka http://code.google.com/intl/nl/apis/maps/documentation/flash/ dan klik "Download API Google Maps untuk Flash SDK". Jendela sembulan akan muncul, pilih Simpan file "sdk.zip" dan download.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 5: Instal Komponen SDK

Sekarang kita perlu menginstal komponen SDK untuk menggunakannya dalam Flash. Untuk melakukannya, navigasikan ke lokasi tempat Anda menyimpan Google Maps API untuk Flash SDK dan temukan versi libarary interface non-Flex. Dalam kasus saya ini (lib/map_1_9.swc). Sekarang salin file "map_1_9.swc".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 6: Folders

Setelah itu, jika Flash Anda saat ini terbuka, keluar dari aplikasi dan cari folder ini:

  • (Windows) C:\Program Files\Adobe\Adobe Flash CS3 (or your Flash version)\en (or your language)\Configuration\Components
  • (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3 (or your Flash version)/Configuration/Components

Di dalam folder itu buat folder baru bernama "google" dan Tempelkan file "map_1_9.swc" di dalamnya. Flash sekarang disiapkan untuk mendukung Google Maps API untuk Flash.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 7: File ActionScript 3.0 Baru

Ok. Itu semua dilakukan dan dibersihkan! Sekarang kita akhirnya dapat mulai membuat peta kita di Flash. Mulai Flash CS3 atau CS4 dan buat file ActionScript 3.0 baru, ukuran tahap default (550 x 400).

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 8: Simpan!

Sekarang cukup simpan file; tekan "Ctrl + S" atau buka File > Save di menu. Simpan ke lokasi yang Anda inginkan dan beri nama apa pun yang diinginkan. Saya menamainya "google_map".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 9: GoogleMapsLibrary

Buka panel Komponen "Ctrl + F7" atau klik Window > Components di menu dan seret GoogleMapsLibrary ke atas panggung.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 10: Layer Action

Buat layer baru, klik dua kali pada namanya dan ganti namanya menjadi "action".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 11: Import..

Sekarang dengan layer action yang dipilih buka panel actions dengan menekan "F9" atau mengklik Window > Actions. Tambahkan baris kode ini:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 12: Membuat Peta

Sekarang mari kita tambahkan peta! Saat kita memuat film, kode ini akan membuat peta dan mengaturnya di atas panggung. Di dalam kode kita melihat variabel "map.key"; di sini kita harus menambahkan Kunci API pribadi kita. Buka file tempat Anda menyimpan Kunci API dan Copy/Paste ke dalam variabel.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 13: Uji Film

Ok, sekarang pergi dan uji film Anda "Ctrl + Enter" atau klik Control > Test Movie di menu dan Anda akan melihat bahwa Anda baru saja membuat peta.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 14: Kontrol

Pada tahap ini kita hanya bisa menarik peta. Itu bukan yang kita cari, jadi mari kita tambahkan beberapa kontrol ke peta yang memungkinkan kita zoom dan bergerak. Untuk menambahkan kontrol ke peta, kita perlu memperbarui kode. Pertama, kita perlu memanggil beberapa kelas tambahan:

Setelah itu kita perlu membuat fungsi baru untuk memanggil setelah peta dibuat. Kita menamai fungsi itu "onMapReady()". Di dalam fungsi ini kita menambahkan kontrol ke peta.

Sekarang kita hanya perlu memanggil fungsi "onMapReady()" setiap kali peta kita dimuat. Untuk melakukan itu kita perlu menambahkan baris tambahan ke bagian pertama dari kode kita.

Kode lengkap kita sekarang terlihat seperti ini:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 15: Lebih lanjut ..

Sekarang uji film Anda "Ctrl+Enter" atau klik Control > Test Movie di menu dan Anda akan melihat peta kita sekarang memiliki kontrol. Kita dapat memperbesar dan bahkan mengubah peta menjadi tampilan Satelit, Hybrid, dan Terrain. Itu sangat keren tapi kita ingin lebih..

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 16: Lintang dan Bujur

Mari tampilannya ke lokasi tertentu begitu peta kita dimuat untuk pertama kalinya. Katakanlah saya seorang peselancar dan saya ingin membuat peta tempat selancar di kota asal saya. Kita tidak ingin orang secara manual harus memperbesar dan mencari area, jadi kita akan memperbaikinya dalam beberapa detik. Satu-satunya hal yang harus ditambahkan adalah satu baris kecil kode ke fungsi "onMapReady()" kita.

Apa yang sebenarnya kita lakukan di sini adalah membuat titik LatLng baru di peta. Pertama-tama kita tentukan 2 nilai: "lintang" dan "bujur" dari wilayah kita. Lalu kita atur nilai zoom; Saya memilih untuk menggunakan 9. Zoom berkisar dari 0 hingga sekitar 16 (ini dapat bervariasi dari satu wilayah ke wilayah lain). Terakhir kita mengatur tipe peta; Saya memilih di sini untuk HYBRID_MAP_TYPE.

Fungsi "onMapReady()" sekarang terlihat seperti ini:

Jika kita menguji film, Anda dapat melihat bahwa banyak hal telah berubah. Setelah peta dimuat, kita memperbesar wilayah tertentu dan tipe peta kita sekarang Hybrid. Untuk menentukan garis lintang dan bujur untuk wilayah Anda, Anda dapat menggunakan Google Earth atau tool online seperti http://itouchmap.com/latlong.html.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 17: Tambahkan Marker

Sekarang mari kita tambahkan penanda sederhana ke peta kita. Tambahkan 2 kelas lagi:

dan perbarui fungsi "onMapReady()" dengan bagian kode ini:

Sekali lagi kita membuat titik LatLng dengan beberapa nilai lintang/bujur tertentu untuk lokasi kita. Kemudian kita memanggil "addOverlay()" untuk meletakkan penanda kita di peta. Kode lengkap kita sekarang terlihat seperti ini:

Pergi dan uji film Anda. Anda akan melihat penanda kita di peta.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 18: Masih Banyak Lagi..

Sekarang mari kita ambil semuanya ke level selanjutnya. Kita memiliki peta dengan kontrol zoom dan penanda. Apa lagi yang kita butuhkan? Yah, aku akan memberitahumu. Kita membutuhkan LEBIH BANYAK PENANDA, TOOLTIPS, INFO WINDOWS dan kita ingin memuat semuanya dari file XML. Jadi mari kita mulai. Pertama kita akan membuat file XML kita. Buka editor XML Favorit Anda dan buat file ini:


Langkah 19: onMapReady()

Setelah peta dimuat, kita perlu menarik data XML ke file Flash kita. Buat fungsi baru bernama "xmlLoader()" dan kita akan memanggil fungsi itu di fungsi "onMapReady()". Pertama-tama perlu hapus kode yang ditambahkan untuk membuat penanda kita hanya beberapa langkah sebelumnya. Kemudian kita akan menambahkan baris untuk memanggil fungsi "xmlLoader()". Fungsi "onMapReady()" kita sekarang akan terlihat seperti ini:

Selanjutnya kita ingin membuat fungsi "xmlLoader()".

Pada langkah selanjutnya kita akan mengisinya.


Langkah 20: Muat XML

Ok kita di sini. Mari memuat data XML kita. Di dalam fungsi "xmlLoader()" kita menambahkan kode ini:

Ini akan membuat data XML kita dapat digunakan.


Langkah 21: Loop Melalui Lokasi

Karena memiliki 3 lokasi dalam file XML, kita harus membuat loop "Untuk" dan menyimpan semua data dalam beberapa Array. Di dalam fungsi "loadXML()" kita menambahkan kode ini untuk membuat loop For:

Untuk menguji apakah semuanya berfungsi, kita akan melacak variabel "title_tip". Uji film Anda dan Anda harus mendapatkan output berikut:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 22: Variabel

Selanjutnya kita harus membuat beberapa variabel untuk menyimpan data kita dimuat dari file XML. Di dalam For loop kita menambahkan variabel-variabel ini:

Jika mau, Anda dapat menghapus baris "trace()" yang digunakan sebelumnya. Perulangan For kita sekarang terlihat seperti ini:


Langkah 23: Penanda Tambahan..

Ok! Kita perlu menambahkan penanda ke peta untuk masing-masing dari tiga lokasi. Sekarang kita memiliki semua data yang disimpan dalam variabel, kita harus membuat fungsi baru bernama "createMarker()". Di dalam fungsi "loadXML()" kita menambahkan fungsi baru ini:

Kita masih perlu memanggil fungsi "createMarker()" ini untuk melihat penanda kita di peta. Untuk melakukan itu kita perlu menambahkan satu baris kode tambahan di akhir For loop kita:

Beginilah fungsi "loadXML()" kita seharusnya terlihat sekarang:

Uji film Anda dan Anda akan melihat penanda di peta! Perhatikan bahwa 3 poin kita sangat dekat satu sama lain sehingga Anda mungkin ingin memperbesar sedikit untuk melihatnya lebih jelas.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Langkah 24: Info Windows

Akhirnya kita perlu menambahkan beberapa Info Windows. Jika kita mengklik penanda maka kita akan mendapatkan beberapa informasi tentang lokasi mereka. Untuk melakukannya, kita perlu menambahkan 2 kelas lagi:

..sebuah kode lagi untuk fungsi "createMarker()" kita..

Sekarang uji film Anda dan Anda akan melihat bahwa penanda kita sekarang dapat diklik dan mereka membuat jendela info dengan teks dari file XML.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Kesimpulan

Ini dia! Lihatlah kode terakhir kita:


Uji film Anda Ctrl + Enter untuk memeriksa hasilnya. Anda akan memiliki peta Flash berbasis xml Anda sendiri! Anda dapat menggunakannya di situs web Anda, mengedit lokasi yang Anda inginkan, terserah Anda. Silakan bereksperimen, jika Anda memiliki hasil yang bagus, pastikan untuk membagikannya kepada kami.

Saya harap Anda menyukai tutorial ini, terima kasih sudah membaca!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.