Introduksi Google Maps API for Flash menggunakan Flex

Halo, salam kenal semuanya, saya Inas Luthfi yang pada post kali ini kan membahas sebuah API Actionscript  sesuai dengan judul yaitu Google Maps API for Flash.

Dulu developer harus menggunakan JavaScript untuk mengakses API Google Maps sehingga kebanyakan website yang memanfaatkan API tersebut merupakan paduan dari JavaScript dan HTML. Namun sekarang telah ada API Google Maps untuk Flash dalam bahasa Action Script 3. Karena Google mengembangkan API untuk Flash pasti ada sebabnya kenapa Google memilih Flash daripada Silverlight ataupun JavaFX. Beberapa sebabnya:

• Flash adalah platform yang Ubiquitous, ada di Linux, Mac, maupun Windows
• Pemrosesan grafis vector lebih cepat daripada Javascript
• Memungkinkan interaktivitas yang out-of the box, misalnya fitur terbaru dari Google Maps API for Flash adalah 3D view
• Flash sudah populer terlebih dahulu dan integrasi developer+designer sudah mantap

Selain Google Maps, API peta yang mendukung Flash adalah Yahoo!Maps, untuk Bing saya tidak paham

Kita akan mencoba membuat sebuah aplikasi menggunakan Flex Framework dibantu oleh Flex Builder yang memanfaatkan Google Maps API, dan untuk sekarang saya akan bahas penambahan control standard pada peta dan teknik overlay.

Mempersiapkan Development Environment

Sebelum memulai development pastikan Flex Builder sudah dibuka, buat project baru dengan target Flash Player Plugin. Download Library AS3 (ActionScript 3) Google Maps pada link SDK. Klik kanan Project > Properties pada Flex Builder dan tambahkan library yang berformat .swc yang terletak pada folder /lib di SDK (ada dua swc yang disediakan pilih yang ada nama ‘flex_’ pada swcnya, satunya lagi adalah swc untuk Flash IDE development)

Screenshoot setting Flex Builder IDE (pakai Mac)

Menambahkan Peta

Sebelum menggunakan API ini, Google memaksa kita untuk mempunyai API Key untuk domain spesifik kita. API key ini bisa didapat di Sign up for an API key. Tapi tenaang, untuk kali ini kita tidak perlu menggunakan API key, karena kita akan men-test melalui local file saja, API key ini bisa diisi  string apa saja untuk kali ini.

Sisipkan kode MXML berikut:

<![CDATA[ import com.google.maps.LatLng; import com.google.maps.MapType; import com.google.maps.MapOptions; private function onPreInitialize():void { var option:MapOptions = new MapOptions(); // zoom level option.zoom = 5; // set center peta ke Indonesia raya (nyanyikan Indonesia Raya) option.center = new LatLng(-1.054628,116.630859); // jenis peta option.mapType = MapType.HYBRID_MAP_TYPE; peta.setInitOptions(option); } ]]>

Pada kode diatas, kita mendefinisikan namespace baru

xmlns:maps=”com.google.maps.*“

Setelah itu menambahkan tag Map dengan ukuran 100% layar. Kita mengisi property “key” pada tag Map dengan sembarang string untuk sekarang. Sebelum menampilkan peta, kita mendapat kesempatan untuk menangkap event mapevent_mappreinitialize dimana hanya pada event ini kita dapat memanggil method setInitOptions. Pada tag Map kita juga mengeset property language dengan “id” artinya Indonesia, sehingga beberapa interface kita akan berbahasa Indonesia (agak-agak nasionalis lah)

Menambahkan Control

Pada maps.google.com kita dapat melakukan melihat zooming level dan mengubah mode peta. Untuk melakukan hal serupa, mari kita tambahkan control pada peta. Beberapa tipe control yang dapat ditambahkan (copy-paste dari dokumen help API)

• PositionControl – a pan control as used on Google Maps. Appears in the top left corner of the map by default.
• ZoomControl – a zoom control slider as used on Google Maps.
• MapTypeControl – buttons that let the user toggle between map types (such as Map and Satellite).
• ScaleControl – a scale control is a visual indicator used to indicate the resolution of the current map and zoom level.
• OverviewMapControl – a collapsible overview map in the corner of the screen.

Ternyata cukup banyak juga yah control yang disediakan. Kita akan menambahkan semua control teresebut pada peta dengan default position masing-masing, untuk menambahkan control, tambahkan eventlistener pada event mapevent_mapready di peta

Setelah itu, coba compile dan jalankan aplikasi

Overlay dan Marking

Supaya tidak menimbulkan kebosanan, kita dapat “menempelkan” Marker pada peta GoogleMaps, fitur ini justru yang sering dimanfaatkan oleh aplikasi untuk melakukan fungsionalitasnya yaitu memberikan informasi pada sebuah tempat di dunia. Untuk mendukung fasilitas Marking, kita harus mengenal konsep Overlay, sederhananya Overlay mirip seperti menambahkan layar tambahan pada peta dimana layar tersebut akan bergeser/zooming mengikuti peta.

Contoh terakhir post ini adalah peta yang dapat diklik untuk menambah marker, setelah di-klik akan muncul semacam balon dialog diatas marker. Karena ini adalah listing code terakhir, saya akan memberikan source mxml lengkapnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*">
 
<mx:Script>
 
<![CDATA[
 
import com.google.maps.overlays.MarkerOptions;
 
import mx.core.BitmapAsset;
 
import com.google.maps.InfoWindowOptions;
 
import com.google.maps.overlays.Marker;
 
import com.google.maps.MapMouseEvent;
 
import com.google.maps.controls.OverviewMapControl;
 
import com.google.maps.controls.ScaleControl;
 
import com.google.maps.controls.MapTypeControl;
 
import com.google.maps.controls.ZoomControl;
 
import com.google.maps.controls.PositionControl;
 
import com.google.maps.LatLng;
 
import com.google.maps.MapType;
 
import com.google.maps.MapOptions;
 
[Embed(source='jempol.png')]
 
private var jempol:Class;
 
private var jempolAsset:BitmapAsset = new jempol();
 
private function onPreInitialize():void
 
{
 
var option:MapOptions = new MapOptions();
 
// zoom level
 
option.zoom = 5;
 
// set center peta ke Indonesia raya (nyanyikan Indonesia Raya)
 
option.center = new LatLng(-1.054628,116.630859);
 
// jenis peta
 
option.mapType = MapType.HYBRID_MAP_TYPE;
 
peta.setInitOptions(option);
 
peta.addEventListener(MapMouseEvent.CLICK,onClick);
 
}
 
private function onReady():void
 
{
 
// tambah control boss
 
peta.addControl(new PositionControl());
 
peta.addControl(new ZoomControl());
 
peta.addControl(new MapTypeControl());
 
peta.addControl(new ScaleControl());
 
peta.addControl(new OverviewMapControl());
 
}
 
private function onClick(event:MapMouseEvent):void
 
{
 
// tambah marker
 
peta.addOverlay(new Marker(event.latLng,new MarkerOptions({icon:new jempol(), iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER})));
 
// tampilkan InfoWindow
 
peta.openInfoWindow(event.latLng, new InfoWindowOptions({hasShadow:false,title: "Marker Added!", content: "Position: "+event.latLng.lat()+", "+event.latLng.lng()}));
 
}
 
]]>
 
</mx:Script>
 
<maps:Map id="peta" language="id" width="100%" height="100%" key="test" mapevent_mappreinitialize="onPreInitialize()" mapevent_mapready="onReady()"/>
 
</mx:Application>

Perhatikan, saya menggunakan Image asset embedding untuk mengembed image, dan untuk membuat icon marker berbeda saya menggunakan MarkerOption dimana constructornya memiliki argumen berupa banyak opsi (dapat dilihat pada API Reference Google Maps). Untuk menangkap event peta di-klik kita tidak dapat menambahkan event listener Click pada MXML tapi harus pada source AS3 seperti  peta.addEventListener(MapMouseEvent.CLICK,onClick) . Setelah itu pada event handler-nya kita dapat memanfaatkan MapMouseEvent yang diberikan sebagai argumen untuk mengambil kombinasi longitude+latitude-nya

Final Result

Sekian dulu introduksi API ini, masih ada tambahan lagi sebenarnya fitur yang belum dibahas misalnya service Geocoding, Route, dan 3Dview.