Menampilkan Peta Dasar

Posted: December 2, 2010 in Maps Dasar
Tags: , ,

Sebagai tahap awal, sekarang kita akan belajar bagaimana membuat peta dasar Google dan Menampilkan pada halaman Website. Google API sebenarnya memiliki struktur dan cara penulisan code yang menurut saya sangat mudah. Google API layaknya Framework dalam sebuah bahasa pemrograman yang kita tinggal memanfaatkan fungsi-fungsi yang tersedia dan memanfaatkannya sesuai kebutuhan kita.

Sekarang terlebih dahulu kita coba buat Halaman web, disini saya menggunakan notepad supaya lebih mudah, anda bisa mengunakan tools-tools lain untuk menulis code, senyaman anda dunk😀

Ketik Kode Dibawah ini, “ane ngerti pasti ente males… copas aj jg ndak papa…😀 “, tapi saran ane, biasakan menulis sendiri biar ilmunya tambah melekat😀

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>latihan-1</title>
    <script class="hiddenSpellError"><!--mce:0--></script>
key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7a
qV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">


<div id="map" style="width: <span class=;">550px; height: 450px"></div>
    <noscript>mce:2</noscript>
    <script type="text/javascript">

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(-4.039618,114.65332),4);

    }
    else {
      alert("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
    }
    </script>
  </body>
</html>

Ok, setelah itu simpan, dan panggil Halaman Tersebut. nanti hasilnya kayak gini :

Sekarang saya akan terangkan sedikit mengenai Script diatas dan beberapa setting yang bisa dilakukan

  1. Script embedded untuk load resource dari google yang wajib ada
        <script class="hiddenSpellError"><!--mce:1--></script>
    key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aq
    V44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
    type="text/javascript"></script>
    

    disalah satu script terdapat
    “key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44c
    W1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw”
    key inilah yang anda harus ganti dan sesuaikan dengan Key Websites anda, bisa anda dapatkan di Google Maps Key.

  2. Inisialisasi Peta dan Setting Lebar dan Tinggi Peta
    
    <div id="map" style="width: <span class=;">550px; height: 450px"></div>
    

    id=”map” , Id ini yang akan dipanggil oleh document.getElementById(“map”), bisa anda ganti sesuaikan saja😀

        var map = new GMap2(document.getElementById("map"));
    
  3. Seeting Latitude Longitude “Posisi Pusat Peta”
          map.setCenter(new GLatLng(-4.039618,114.65332),4);
    

    GLatLng(-4.039618,114.65332) -> merupakan Inisialisasi Latitude Longitude Peta.
    cara mendapatkan Lat-Lng ini sebenarnya banyak cara, bisa melalui GPS, Maps Google dan lain2.
    salah satu cara yang mudah seperti ini :

  4. Setting Zoom Peta
          map.setCenter(new GLatLng(-4.039618,114.65332),4);
    

    Zoom Peta / Fokus Peta bisa disesuaikan dengan mengubah nilai “4” diatas, zoom yang disediakan antara nilai 1-coba aj sendiri😀

Oke Selamat Mencoba😀

CMIIW…..😀

Comments
  1. mas ais says:

    assalamu’alaykum…. tutorial anda sangt berguna bagi saya…

    bagaimankah cara setup, menentukan koordinat suatu wilayah??? dan bagaimana cara mendapatkan titik koordinat agr bisa kita simpan kedalam database???

    terima kasih seblumnya….

  2. rahmat says:

    asslamualaikum
    artikel ini sangat bermanfaat sekali

    ada yang ingin saya tanyakan
    pada link ini membahas https://kurniawandwi.wordpress.com/2011/03/14/mengambil-latitude-longitude-google-maps-dari-database/ (mengambil Mengambil Latitude-Longitude Google Maps dari Database).

    1.bagaimana cara mengambil “Mengambil Latitude-Longitude Google Maps dan menyimpannya kedalam database”?, contoh nya ketika membuat penanda posisi dan tujuan di peta maka secara otomatis tersimpan latitude dan longitude nya

    2.bila sudah tersimpan latitude dan longititude nya, bagaimana untuk mengambil jarak dari point a ke point b dari latitude dan longititude yang telah ada. (apakah ada api nya tersendiri)?

    mohon balasannya saya kebingungan

    • kurniawandwi says:

      wa’alaikumsalam

      1. kalo menyimpan tinggal main AJAX aj. gini mas rahmat, untuk memudahkan sampeyan belajar Google Maps API, khususnya yg berbasis web, diharapkan kemampuan javascriptnya di perdalam. cm tinggal nambahkan event onClick pas ketika di klik posisi atau dimasukkan posisi alamatnya. lalu tinggal kita kasih fungsi untuk menyimpan di database.

      2. untuk menghitung jarak antar point, saya mau jelaskan agak rumit, karena berhubungan dengan sudut elevasi tiap tempat. kalau cuma ambil garis lurus aj yah.
      contoh scriptnya :

      var d=gmarkers[i].getPoint().distanceFrom(gmarkers[j].getPoint())/1000;

      Ket.
      Point pertama : gmarkers[j].getPoint().
      Point Kedua : gmarkers[i].getPoint().

      *untuk menampilkan dalam kilometer, kasih tambahan fungsi javascript : d.toFixed(5).

      • rahmat says:

        assalamualaikum

        terimakasih atas jawaban nya.. saya tertolong ada rujukan/referensi nya mas utk no 2, mungkin ada tutorial yang dapat saya gunakan? dan saya berencana utk implementasi ke dalam algoritma dijkstra, apakah mas pernah buat sebelumnya?

        salam
        rahmat

      • kurniawandwi says:

        Sepertinya pernah cm bukan google maps, kalo ndak salah pakai SVG tp ud lama 7-8th yg lalu.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s