Laman

Kamis, 09 Februari 2012

Membuat Aplikasi Google Maps (VB 6.0)

Google

Disini saya akan sharing bagaimana membuat program sederhana dengan Visual Basic 6.0 yang akan menampilkan google map pada program tersebut. Sebenarnya ini merupakan project TA (Tugas Akhir) saya dulu cuma waktu itu menampilkan lokasi dengan google earth pada software Prediksi Cuaca dengan Logika Fuzzy di TA saya. Sebenarnya ini gampang banget cuma me link suatu file .html pada VB 6.0 sehingga sebelumnya kita buat dulu file html nya. Di dalam html sendiri ada beberapa code API (Application Programing Interface) yang telah disediakan oleh google jadi tinggal di copas aja.hehe.. Code yang disediakan oleh google tu gratis alias bisa di sebarkan dan di edit sesuka kita kok (uda ada di webnya) www.code.google.com. Trus gimana cara membuat file htmlnya???
Berikut Langkah-langkahnya:
1. Buka web www.code.google.com
2. Klik Edit Html di pojok kanan dan copy code tersebut
3. Paste code tersebut pada notepad dan simpan dengan attribut .html
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <style type="text/css">
      @import url("http://www.google.com/uds/css/gsearch.css");
      @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw"
      type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
      
        // Create and Center a Map
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    
        // bind a search control to the map, suppress result list
        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
      }
    }
    GSearch.setOnLoadCallback(initialize);

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>
4. selesai
Setelah membuat file html kita lanjutkan dengan membuat program dengan Visual Basic 6.0, berikut langkah untuk pemprograman di Visual Basic 6.0
1. All Program–> Microsoft Visual Studio–> Visual Basic 6.0 pilih yang standart exe
2. Setelah muncul form klik Project–> Component (Ctrl + T) sehingga muncul form baru dan pilih “Microsoft Internet Controls”

3. Buat web browser pada form dengan mengklik web browser(gambar bola)dunia pada toolbar. untuk lebih jelasnya liat gambar dibawah

4. Masukkan code berikut pada form
Private Sub Form_Load()
WebBrowser1.Navigate (App.Path &amp; "/map.html")
End Sub

keterangan:
WebBrowser1 = properties web browser, map.html = nama file html yang tadi.
Jangan lupa file html diletakkan satu folder dengan program visual basicnya
5. Run program tersebut,seperti gambar dibawah ini

6. Selesai..

2 komentar: