Menambahkan Google Map ke Aplikasi Web ASP.NET

Peta Google sekarang ini seperti sudah menjadi acuan dalam pembuatan aplikasi GIS. Dalam setiap kesempatan, sering ditanyakan, apakah aplikasi yang dibangun bisa terintegrasi dengan peta Google? Apakah tampilan petanya seperti tampilan peta Google? Bisakah memplot data yang ada di aplikasi kita ke peta Google?.

Menambahkan peta Google ke aplikasi web GIS sebenarnya bisa dikatakan ‘gampang-gampang susah’. Susahnya (baca: merepotkan) adalah penggunaan Google Map API. API ini adalah kode yang diberikan Google sesuai dengan domain yang kita daftarkan. Biasanya domain yang kita dafarkan adalah domain server dimana aplikasi akan di publish. Sedangkan pada masa pengembangan (pembuatan) aplikasi sering kita menggunakan komputer lokal atau laptop bukan di server. Akibatnya ada kendala pada saat ingin mencoba kode yang kita buat. Peta Google tidak akan muncul jika kode API tidak sesuai . Jadi harus bolak-balik ke server.

Untuk menambahkan peta Google bisa menggunakan beberapa cara, salah satunya adalah kode javascript yang cukup panjang. Yang menjadi masalah ketika menggunakan kode javascript adalah jika ingin menggabungkan data dengan kode javascript. Seperti diketahui aplikasi ASP.NET berjalan di server sedangkan javascript berjalan di client. Salah satu cara mengatasi hal ini adalah menuliskan kode javascript di
code behind yang berjalan di server.

Contoh berikut adalah potongan program untuk menambahkan peta Google ke aplikasi ASP.NET menggunakan javascript yang ditulis di codebehind:

Dim builder As New StringBuilder()
builder.Append("<script type='text/javascript'>" & vbCr)
builder.Append("//<![CDATA[" & vbCr)
builder.Append(vbCr)
builder.Append("function load() {" & vbCr)
builder.Append("if (GBrowserIsCompatible()) {" & vbCr)
builder.Append("var map = new GMap2(document.getElementById('map'));" & vbCr)
builder.Append("map.addControl(new GLargeMapControl());" & vbCr)
builder.Append("map.addControl(new GMapTypeControl());" & vbCr)
builder.Append("map.addControl(new GScaleControl());" & vbCr)
builder.Append("map.setCenter(new GLatLng(" & yy & "," & xx & "), 13, G_NORMAL_MAP);" & vbCr)
builder.Append(vbCr)
builder.Append("var point = new GLatLng(" & yy & "," & xx & ");" & vbCr)
builder.Append("var marker = createMarker(point,'gajah 22');" & vbCr)
builder.Append("map.addOverlay(marker);" & vbCr)
builder.Append("}" & vbCr)
builder.Append("}" & vbCr)
builder.Append(vbCr)
'Buat tanda di peta Google
builder.Append("function createMarker(point,number)" & vbCr)
builder.Append("{" & vbCr)
builder.Append("var marker = new GMarker(point);" & vbCr)
builder.Append("var html = number;" & vbCr)
builder.Append("GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(html);});" & vbCr)
builder.Append("return marker;" & vbCr)
builder.Append("};" & vbCr)
builder.Append(vbCr)
builder.Append("//]]>" & vbCr & "</script>" & vbCr)
builder.Append(vbCr)

yy dan xx di baris pertengahan adalah variabel untuk memasukkan nilai koordinat latitude dan longitude yang akan di plotkan ke peta Google.

Cara kedua untuk menambahkan peta Google ke aplikasi web ASP.NET adalah menggunakan tool atau dll dari pihak ketiga. Cara ini lebih mudah daripada cara pertama.

  • Download SubGurim wrapper dll disini http://en.googlemaps.subgurim.net/descargar.aspx
  • Unzip dan masukkan file Gmaps.dll ke folder Bin di aplikasi ASP.NET
  • Tambahkan di toolbox, pilih menu Tools – Choose Toolbox Items. Browse ke file Gmaps.dll yang ada di folder Bin. Di tool box akan tampak seperti ini

Google map toolbar

  • Buat web page baru dan drag GMap dari toolbox ke page, Gmap control muncul di page.
  • Dapatkan Google Map API disini, http://www.google.com/apis/maps/ .
  • Buka web config, masukkan key API di kode berikut
<appSettings>
 <add key= "googlemaps.subgurim.net" value= " CopyKodeAPIdiSini " />
</appSettings>
  • Tambahkan contoh kode berikut di event Page Load
Dim alamat As String
Dim keyAPI As String = ConfigurationManager.AppSettings("googlemaps.subgurim.net")
Dim GeoCode As Subgurim.Controles.GeoCode

alamat = "Jalan Ciputat Raya. Jakarta. Indonesia"
GeoCode = Subgurim.Controles.GMap.geoCodeRequest(alamat, keyAPI)
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, _
GeoCode.Placemark.coordinates.lng)

GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
Dim oMarker As New Subgurim.Controles.GMarker(gLatLng)
GMap1.addGMarker(oMarker)
  • Tekan F5 untuk menjalankan aplikasinya. Hasilnya seperti ini

Hasil

Jika ingin menampilkan lokasi tertentu berdasarkan koordinat lat dan long, seperti contoh javascript diatas, ganti variabel gLatLng menjadi seperti ini

Dim gLatLng As New Subgurim.Controles.GLatLng(-6.93395,107.620857)

Happy Coding…
Jika ada pertanyaan atau yang lainnya silahkan tulis di komentar.

Contoh kode cara kedua selengkapnya dapat di download di sini

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 5 Agustus 2009, in ASP.net, Web GIS and tagged , , . Bookmark the permalink. 5 Komentar.

  1. Bagus banget Ndi… ntar aku coba juga sharing aplikasiku yang pakai google map (buat nambah wawasan), cuman kayaknya kalo di aplikasi harus IP Public deh.

  2. mas bs ga kalo kombine k php??
    satu lg kalo blom ad streetview bs ga qt tambah sendiri??

    • Kombine ke PHP bisa kok, cuman aku gak tau caranya. Kalo pake javascript pasti bisa di kombine.
      Kalo nambah street view gak tah dah, silahkan baca aja di user guidenya.

  3. ok, nanti mw tak coba. uda coba liad2 pake mapserver. susahnya luar biasa.
    soalny sy kan di daerah kalimantan barat. jd peta utk streetview google map blom ad kyknya. apa mgkn kita digitasi sendiri gt yah?? atw smw peta itu dr google?

  4. mas..aku uda coba akses ke alamat : http://www.google.com/apis/maps/, tapi aku bingung gmn caranya dapetin google map api key/code nya mas?,,,,

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: