Tag Archives: google maps

Peta Dunia Di Metro Style Windows 8 Menggunakan Google Maps API

Pada siang hari kali ini saya akan membangun sebuah aplikasi yang dapat menampilkan peta kota ataupun negara. Bagaimana caranya? Mungkin itu yang ada di benak kalian ketika membaca artikel ini pertama kali.
Sebenarnya tidak sulit untuk menampilkan peta yang dinamis sesuai dengan pencarian yang pengguna inputkan.
Disini saya akan menggunakan Google Maps API untuk mencari peta dari tempat/kota yang pengguna inputkan di aplikasi. Google Maps menyediakan API yang dapat kalian sebagai developer gunakan.

 

 
Pembuatan Aplikasi

Langsung saja ke dalam pembuatan aplikasi.

Pertama-tama kalian perlu membuat blank app (XAML) dengan nama : AplikasiCariPeta

Setelah blank app dibuat, design lah tampilan aplikasi sehingga tampak seperti berikut.

Tampilan Aplikasi Cari Peta 1

Kalian dapat menambahkan kode berikut ke dalam bagian grid untuk mendapatkan tampilan tersebut :

<Grid Background=”#FF207627″>
<TextBlock HorizontalAlignment=”Left” Margin=”434,50,0,0″ TextWrapping=”Wrap” Text=”Cari” VerticalAlignment=”Top” Height=”55″ Width=”97″ FontSize=”48″/>
<TextBox x:Name=”petaTxtBox” HorizontalAlignment=”Left” Margin=”552,46,0,0″ TextWrapping=”Wrap” Text=”” VerticalAlignment=”Top” Height=”65″ Width=”402″ FontSize=”36″/>
<Image x:Name=”petaImage” HorizontalAlignment=”Left” Height=”600″ Margin=”400,143,0,0″ VerticalAlignment=”Top” Width=”600″/>

</Grid>

Setelah itu tambahkan event keydown pada textbox dengan menambahkan kode : KeyDown=”ReadKey”  diantara “<TextBox” hingga “/>”. Kemudian klik kanan pada KeyDown=”ReadKey” dan pilih “Navigate to Event Handler”.

Setelah kalian melakukannya tampilan pada layar kalian akan seperti ini :

Tampilan Aplikasi Cari Peta 2

Lalu tambahkan kode seperti berikut di dalam void ReadKey :

if (e.Key == Windows.System.VirtualKey.Enter)
{
try
{
petaImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri(“http://maps.googleapis.com/maps/api/staticmap?center=&#8221; + petaTxtBox.Text + “&zoom=13&size=600×600&maptype=hybrid&sensor=false”));
}
catch
{
petaTxtBox.Text = “Periksalah koneksi internet anda!”;
}
}

Disini kalian dapat melihat bagian “if (e.Key == Windows.System.VirtualKey.Enter)” adalah kondisi untuk membaca inputan key Enter.

Bagian “petaImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage” adalah statement untuk mengisi Image yg bernama petaImage dengan BitmapImage yang berasal dari alamat Url maps.googleapis.com.

Tampilan kalian seharusnya sekarang menjadi seperti ini :

Tampilan Aplikasi Cari Peta 3

 

 

Jalankan Aplikasi

Sekarang waktunya menjalankan aplikasi! Run project AplikasiCariPeta kalian. Lalu ketikkan nama kota/negara dalam textbox dan tekan Enter.

Maka Taraa~~ peta dari tempat yang anda ketikkan muncul setelah beberapa saat aplikasi anda mengunggu respon dari server.

Tampilan Aplikasi Cari Peta 4