Membuat Peta dari Google Maps API

mapsLiburan waktunya mengembangkan diri, penasaran ingin mengexplore kembali mengenai Peta atau suatu lokasi di website akhirnya saya jatuh hati kepada Google Maps, Pasti. Saya akan coba membuat tutorial sederhana Cara menampilkan Peta suatu Lokasi di Website :

Sebelumnya ada hal yang harus dimengerti terlebih dahulu mengenai Google Maps API Key hanya saya tidak menjelaskan detail disini. Sederhanaya itu adalah Key yang dibutuhkan agar kita bisa memakai API dari google Maps dibawah saya pakai API sbagai contoh, tapi jika ingin benar2 membuat aplikasi sndiri saya sarankan anda mendaftarkan dan membuat Key Google Maps anda sendiri.

 

Scriptnya Sederhana :

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

Diantara tag <head> anda memanggigil script agar anda bisa menggunakan API dari google Maps. Jadi pastikan anda tuliskan itu. Key berisi data yang saya jelaskan diatas. Sedangkan sensor itu untuk menjelaskan aplikasi ini menggunakan sensor atau tidak contohnya seperti GPS.

<div id=”googleMap” style=”width:500px;height:380px;”></div>

Itu adalah Div dengan id googleMap sederhana yang nantinya jadi tempat untuk menampilkan Peta yang akan kita buat.

Disini dibutuhkan pemahaman javascript yang cukup :

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

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

Pertama Kita buat fungsi dengan nama [contoh] initialize() yang di dalam fungsi tersebut kita devinisikan 2 variabel.

  1. mapProp variable ini berisi data configurasi atau settingan untuk peta yang akan kita tampilkan. Ada 3 contoh jenis config
    1. center : disini kita definisikan kode koordinat lokasi yang menjadi bagian tengah peta. Diatas saya contohkan koordinat Bunderan HI, Jakarta
    2. zoom : kita definisikan besaran Zoom dari Peta, semakin besar nilainya semakin Detail tampilan peta yang kita tampilkan
  2. map Variable ini kita jalankan objek yang berasal dari API Goolge maps, yang berisi 2 parameter
    1. document.getElementById(“googleMap”) ini untuk menyeleksi element div yang sudah kita buat diatas dengan id googleMap
    2. mapProp ini adalah nama variabel yang sudah kita buat diatas.
    3. mapTypeId adalah jenis peta yang ingin kita tampilkan, ada beberpa pilihan : ROADMAP, SATELLITE, HYBRID, TERRAIN

google.maps.event.addDomListener(window, ‘load’, initialize);

itu adalah perintah yang digunakan untuk menambahkan listener yang intinya Saat halaman diload dia akan menjalankan fungsi initialize()

Mungkin seperti itu penjelasan sederhananya.

Contoh script :

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(-6.194912, 106.822823),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

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

<body>
<div id="googleMap"></div>

</body>
</html>

Semoga bermanfaat terima kasih, selamat belajar.. happy Codding 😀

Iklan

CANVAS – HTML 5

Pengertian Canvas

canvas<canvas> di HTML 5 adalah element yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript.

<canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript.

<canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar.

Membuat Canvas

Canvas adalah area persegi yang dibuat menggunakan tag <canvas>, secara default canvas tidak meiliki border dan isi.
contoh :

<canvas id=”kanvasku” width=”200″ height=”100″></canvas>

Saat senggang saya coba pelajari dan membuat percobaan, berikut saya coba memeberikan contoh yang saya buat semoga bermanfaat :

<!DOCTYPE html>
<html>
<head>
<script>
function persegi(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.fillStyle="#000000";
	ctx.fillRect(10,10,90,40);
	console.log(ctx);
}
function line(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.moveTo(100,50);
	ctx.lineTo(200,100);
	ctx.stroke();
}
function lingkaran(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.beginPath();
	ctx.arc(100,50,40,0,2*Math.PI);
	ctx.stroke();
}
function text(){
	var cv1 = document.getElementById('myCanvas');
	var ctx = cv1.getContext('2d');
	ctx.font='20px, arial';
	ctx.fillStyle="#ffffff";
	ctx.fillText('Persegi',20,20);
	ctx.strokeText('Persegi',50,70);
}
</script>
</head>
<body >

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p>
<ol>
<li><a href="javascript:persegi()">Persegi</a></li>
<li><a href="javascript:line()">Line</a></li>
<li><a href="javascript:lingkaran()">Lingkaran</a></li>
<li><a href="javascript:text()">Text</a></li>
</ol>
</body>
</html>

Tadi penjelasan sederhananya.. semoga bermanfaat. silahkan dipahami. karena scriptnya setau saya tidak susah. jika ada yg tidak jelas silahkan bertanya. 🙂

jangan lupa gabung di grup belajar website di facebook.

sumber : http://www.w3schools.com/html/html5_canvas.asp

Pengertian JavaScript

Pengertian Javascript

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Client.

javascript

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Client

Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer. JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan pengolahan.

Sejarah Javascript

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[6] JavaScript adalah bahasa yang digunakan untuk AJAX

Beberapa contoh menggunakan adalah:

  • berputar atau bergulir teks.
  • membuat bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh, dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang “menyampaikan kepada alamat yang berbeda”, bagian ekstra dengan kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat terlihat.
  • drop down menu.
  • mengambil informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
  • memvalidasi input pengguna pada formulir.
  • perhitungan tanpa perlu kembali ke server.
  • menentukan jenis browser.

jelas beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari bot.

Bahasa server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS). Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx), atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya. Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)

Hubungan ke Java

Meskipun nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari sintaks antara dua bahasa. Bahkan mereka dikembangkan oleh dua perusahaan yang sama sekali berbeda, dengan tujuan dan pemikiran yang berbeda: Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java. Hanya saja kedua nama tersebut membingungkan bagi orang yang belum tau.

JavaScript dapat diinterpretasikan oleh browser yang paling  langsung dan cepat, sementara Java memerlukan terpisah “Java Virtual Machine” harus dimulai sebelum menjalankan. JavaScript dan Java sama-sama menggunakan sintaks yang mirip (berdasarkan bahasa C) tetapi perintah yang digunakan banyak yang sangat berbeda. Ada juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan deklarasi semua variabel dan jenis mereka (misalnya integer, string atau boolean). Sebaliknya, Javascript adalah “longgar” bahasa diketik, memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya.

Sebagai contoh, membandingkan dua metode penulisan ke tampilan (halaman).
Di Java, untuk menulis “Halo dunia!”, Kode akan membaca: System.out.println (“Halo dunia!”);
Sedangkan dalam JavaScript (di browser), akan berkata: document.write (“Halo dunia! “);

Untuk lebih jelasnya dibawah contoh penulisan javascript,

Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag

<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type=”teks/javascript” src=”alamat.js”>
</script>

Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

<html>
<head>
<script type=”teks/javascript”>

</script>
</head>
</html>

Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type=”teks/javascript”>

</script>
</body>
</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>

<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>

Itu yang dapat saya sampaikan setelah membaca dari beberapa sumber, semoga bermanfaat.

Sumber :

http://id.wikipedia.org/wiki/JavaScript