Terapkan Peta Menggunakan Google Map API untuk Flash

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".

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".

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.

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.

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".

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.

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).

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".

Langkah 9: GoogleMapsLibrary

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

Langkah 10: Layer Action

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

Langkah 11: Import..

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

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

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.

// Create The Map
var map:Map = new Map();
map.key = "Your API Key here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
this.addChild(map);

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.

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:

import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;

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.

function onMapReady(event:MapEvent):void {
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

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.

map.addEventListener(MapEvent.MAP_READY, onMapReady);

Kode lengkap kita sekarang terlihat seperti ini:

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;

// Create The Map
var map:Map = new Map();
map.key = "Your API Key Here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

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..

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.

map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

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:

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

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.

Langkah 17: Tambahkan Marker

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

import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;

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

var marker:Marker = new Marker(
  						     new LatLng(28.74659, -13.93447)	     		           
		     		            );
map.addOverlay(marker);

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:

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;

// Create The Map
var map:Map = new Map();
map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  
  var marker:Marker = new Marker(
							     new LatLng(28.74659, -13.93447)	     		           
		     		            );
  map.addOverlay(marker);
}

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

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:

<?xml version="1.0" encoding="utf-8"?>
 <map_xml>
 
  <location>
   <lat>28.74659</lat>
   <lon>-13.93447</lon>
   <name_tip>Majanicho</name_tip>
   <title_tip><![CDATA[Majanicho]]></title_tip>
   <content_tip><![CDATA[Majanicho is a very good surf spot for longboarding it offers very long rides.]]></content_tip>
  </location>
  
  <location>
   <lat>28.738764</lat>
   <lon>-13.955126</lon>
   <name_tip>Derecha de los Alemanes</name_tip>
   <title_tip><![CDATA[La Derecha de los Alemanes]]></title_tip>
   <content_tip><![CDATA[La Derecha de los Alemanes is another very good spot for longboarders but shortboarders will have some epic days out here to.]]></content_tip>
  </location>
  
  <location>
   <lat>28.741022</lat>
   <lon>-13.951821</lon>
   <name_tip>The Bubbel</name_tip>
   <title_tip><![CDATA[The Bubbel aka La Derecha]]></title_tip>
   <content_tip><![CDATA[The Bubbel is one of the most famouse waves in Fuerteventura its a really hollow reef break and it has some epic barrels on offer.]]></content_tip>
  </location>
 
 </map_xml>

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:

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  xmlLoader();
}

Selanjutnya kita ingin membuat fungsi "xmlLoader()".

function 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:

 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
 }// end of loadXML function

 var xmlLoader:URLLoader = new URLLoader();
 xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 xmlLoader.load(new URLRequest("xml.xml"));

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:

for (var i:Number = 0; i < map_xml.location.length(); i++){
		 trace(map_xml.location[i].title_tip);
		 		
	 }// end of for loop

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

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:

var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;

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

for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;		 		
	 }// end of for loop

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:

// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
               return i;
}// end function createMarker

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:

map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));

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

function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
	 
	 for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;
		 
		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }// end of for loop
	 
	 // Add Markers On The Map
	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
               return i;
      }// end function createMarker
 }// end of loadXML function

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.

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:

import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

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

i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
        {
         map.openInfoWindow(event.latLng, new InfoWindowOptions({
                                      titleHTML: ""+myTitle, 
                                      contentHTML: ""+myContent
                                                               }));
																			  											 
		});

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

Kesimpulan

Ini dia! Lihatlah kode terakhir kita:

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

// Create The Map
var map:Map = new Map();
map.key = "Your API Key Here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  xmlLoader();
}

function xmlLoader(){
 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
	 
	 for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;
		 
		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }// end of for loop
	 
	 // Add Markers On The Map
	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
			   i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
																			  {
																			  map.openInfoWindow(event.latLng, new InfoWindowOptions({
																																	 titleHTML: ""+myTitle, 
																																	 contentHTML: ""+myContent
																																	 }));
																			  											 
																			  });
               return i;
      }// end function createMarker
 }// end of loadXML function

 var xmlLoader:URLLoader = new URLLoader();
 xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 xmlLoader.load(new URLRequest("xml.xml"));
}

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!