Arsip Blog

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

Iklan