Mark B. – tech

Google Maps (Part 1)

Untuk menampilkan google maps dalam website , sangatlah mudah.

Dengan menggunakan javascript dan API yang disediakan oleh Google, kita dapat membuat map kita sendiri.

Berikut langkah-langkah nya :

  1. Kita perlu memanggil API yang telah disediakan oleh google. Untuk itu dibutuhkan sebuah “key” untuk mengakses API dari Google. Untuk memanggil API dari Google cukup dengan menambahkan script berikut :<script src="http://maps.google.com?file=api&amp;v=2.x&amp;key=ABQIAAAAQrDu-0GoFArEoTe0-IZjNxTqGgDyh96E9wduHgp1ObE6w7lS-hRYtFr3tV80oqn2UtGdzGI3RMUh6g" type="text/javascript"></script>

    Setiap domain website membutuhkan “key” yang unik.

  2. Selanjutnya pada bagian body website, tentukan lokasi tempat kita akan menampilkan map
    <div id="map_canvas" style="width: 640px; height: 480px"></div>
  3. Untuk menentukan daerah mana yang akan ditampilkan pada peta, dibutuhkan posisi longitude & latitude dari daerah tersebut. Untuk mendapatkan posisi longitude & latitude dapat diperoleh dari maps.google.com, klik kanan > what’s here ?
  4. Dengan menggunakan javascript , kita akan membuat map-nya. Berikut listing code javascript nya :

    <script type="text/javascript">
    function initialize() {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-6.201818, 106.782235), 13);
    // Select a map type which supports obliques
    map.setMapType(G_NORMAL_MAP);
    map.setUIToDefault();
    //adding marker & marker click event
    var marker = new GMarker(new GLatLng(-6.201818,106.782235))
    map.addOverlay(marker);
    GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml("Binus University");
    });
    }
    </script>

(best view in : firefox & chrome – latest version)

more detail click here: http://code.google.com/apis/maps/documentation/javascript/v2/controls.html

Advertisements
This entry was published on April 18, 2011 at 4:42 am and is filed under IT - Tutorial. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

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

%d bloggers like this: