Tampilkan postingan dengan label programming. Tampilkan semua postingan
Tampilkan postingan dengan label programming. Tampilkan semua postingan

Selasa, 23 Juli 2013

Menambahkan Google Map pada Website

7/23/2013 01:31:00 PM No comments
Hello sobat programming! Kali ini saya akan sharing tutorial menambahkan Google Map pada website yang sedang kita buat.

Oke langsung saja kita meluncur ke script! Dalam contoh ini saya akan membuat halaman baru.
Pertama-tama buatlah file HTML sederhana dengan struktur sebagai berikut :

<!DOCTYPE html>
<html>
    <head>
        <title>Google Map</title>
    </head>
    <body>
        <div id="my-map"></div>
    </body>
</html>

Dalam script diatas kita bisa lihat tag "<div id="my-map"></div>"  yang nantinya akan menjadi frame atau kerangka untuk Map yang akan kita import nanti.

Langkah selanjutnya, import-lah library dari Google Map itu sendiri. Tambahkanlah tag(sesudah tag "</title>") :

<script
    type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>

Oke, kita sudah meng-import Google Map library dari Google Apis. Tinggal satu langkah lagi!
Dalam tag "<head>" setelah "</title>" Ketiklah atau cukup copy-paste script JS(Javascript) dibawah ini. Script ini bertujuan untuk memanggil fungsi dari file library yang sudah kita panggil tadi.

<script type="text/javascript">
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(-6.453720, 106.956310),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('my-map'), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

#Sedikit penjelasan : Ada beberapa kode yang cukup penting dalam script diatas untuk dipahami.
  1. "zoom: 11" : Kode ini berfungsi sebagai level zooming bagi Map anda. Semakin tinggi nilai zoom, maka Map yang ditampilkanpun akan terlihat lebih dekat.
  2. "google.maps.LatLng(-6.453720, 106.956310)" : Angka tersebut sangatlah penting untuk menentukan titik tengah dari Map saat pertama kali load. (Dalam contoh ini koordinat yang dipakai adalah "Klapanunggal, Indonesia")
  3. "MapTypeId.ROADMAP" : Sobat bisa berkreasi dengan mengubah kode diatas. Ini berfungsi akan seperti apakah tipe Map yang akan dibuat. Value lain yang bisa sobat gunakan adalah :
    • MapTypeId.ROADMAP : Menampilkan jalan(default view)
    • MapTypeId.SATELLITE : Menampilkan gambar dari satelit Goggle Earth.
    • MapTypeId.HYBRID : Menampilkan gambar campuran dari pandangan normal & Satelit
    • MapTypeId.TERRAIN : Menampilkan peta fisik berdasarkan Terrain.
  4. "document.getElementById('my-map')" : Kode ini adalah untuk penentu selektor mana yang akan Google Map pakai. Tentu saja dalam contoh ini adalah "<div id="my-map"></div>"
Oiya hampir lupa, percantiklah "the_tag" sobat dengan CSS ! silahkan berkreasi :D ini hanya contoh :

<style type="text/css" media="screen">    
   #my-map{
      display: block;
      width: 600px;
      height: 300px;
      border: 2px solid #373737;
      margin: 20px auto;
   }
</style>

Oke, kurang lebih full scriptnya adalah seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Google Map</title>
        <style type="text/css" media="screen">    
           #my-map{
              display: block;
              width: 600px;
              height: 300px;
              border: 2px solid #373737;
              margin: 20px auto;
           }
        </style>
        <script
            type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            var map;
            function initialize() {
                var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(-6.453720, 106.956310),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('my-map'), mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="my-map"></div>
    </body>
</html>

Selesai! sekarang coba running file yang sudah dibuat tadi ...
Bisa? Selamat! Oke kurang lebih hasilnya seperti gambar dibawah ini :



Baiklah sobat, kita sudahi dulu tutorial kali ini. Pada tutorial selanjutnya, saya akan memodifikasi Map yang sudah kita buat ini dengan Google Marker.
Semoga bermanfaat :) 


 
 
Read More

Rabu, 10 Juli 2013

jQuery .attr() tidak berfungsi pada plugin jQuery dialog

7/10/2013 03:03:00 PM No comments
Pernahkah anda meng-costumize jQuery.dialog plugin ? Tag default HTML nya kurang lebih seperti berikut :

<div id="user-detail" title="Ini form User Detail"></div>
Tag seperti HTML diatas itu akan menghasilkan nilai konstan pada bagian title. Perhatikan gambar dibawah ini.(ilustrasi1.1)

Ilustrasi 1.1

Pada suatu kasus, saya ingin membuat sebuah fungsi javascript(ilustrasi 1.2) dimana pada fungsi ini nantinya akan dilakukan pemanggilan terhadap selektor jQuery.dialog namun kali ini bagian title akan kita setting secara dinamis. Bagaimana caranya?

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);

    $(selector).attr('title', title)
                     .dialog('close')
                     .html(output)
                     .dialog('open');
}
 Ilustrasi 1.2

jQuery sendiri sudah melengkapi library nya supaya kita bisa dengan mudah mengubah value dari suatu attribut tertentu. Yap! dengan menggunakan .attr() (lihat ilustrasi 1.2) . Namun jangan harap fungsi ini akan bekerja pada selektor untuk jQuery Dialog yang script HTML sudah saya berikan diatas tadi.

Lalu bagaimana caranya?
Cukup simple!
Anda cukup mengubah tag yang dibuat oleh jQuery.dialog dan me-replace nya dengan variable yang anda kirim ke fungsi dengan menggunakan .text(). Maka kurang lebih gantilah script fungsi yang sudah dibuat tadi seperti ilustrasi 1.3.

function user_detail(selector, id, title){
    var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
    $("span.ui-dialog-title").text(title); 
 
    $(selector).dialog('close')
                     .html(output)
                     .dialog('open');
}
Ilustrasi 1.3
 
Selamat mencoba! semoga bermanfaat :)

(You can translate this article to English! Check out on sidebar bottom.)

Read More

Menampilkan hanya hari libur pada plugin jQuery Datepicker

7/10/2013 02:15:00 PM No comments
jQuery Datepicker Plugin
jQuery Datepicker Plugin

Hey sobat programming! Jika anda sedang membuat web aplikasi yang pada satu fitur akan anda tampilkan jQuery datepicker namun hanya menampilkan hari libur saja(dalam hal ini hari sabtu dan minggu), disini akan saya berikan jawabannya.

Cobalah untuk memodifikasi script jQuery anda seperti dibawah ini:


$(function()
   {
   $('tag_selektor_anda').datepicker({ beforeShowDay:
     function(dt)
     {
        return [dt.getDay() == 0 || dt.getDay() == 6, ""];
     }
   });
 });

It's so easy right? Selamat mencoba! :)

(You can translate this article to English! Check out on sidebar bottom.)
Read More
Langganan: Postingan (Atom)
Subscribe to RSS Feed Follow me on Twitter!