Pemrograman google map api v3 + jquery

Pendahuluan

Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat menambahkan fitur Google Maps dalam web Anda sendiri dengan Google Maps API. Google Maps API adalah library JavaScript. Menggunakan/memprogram Google Maps API sangat mudah. Yang Anda butuhkan adalah pengetahuan tentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API Anda dapat menghemat waktu dan biaya Anda untuk membangun aplikasi peta digital yang handal, sehingga Anda dapat focus hanya pada data-data Anda. Biarkan data peta-peta dunia menjadi urusan Google saja. Saat ini versi terakhir Google Map API adalah versi 3

Google map dapat digabungkan dengan bebeberapa bahasa pemprograman lain seperti PHP, perl,cgi dll. Sehingga dengan google map API ini akan banyak tercipta banyak applikasi. Dan perlu diketahui Google Map API adalah sebuah OPEN SOURCE sehingga diharapkan applikasi yang dihasilkan dengan google map adalah aplikasi OPEN SOURCE.

Mulai pemrograman google map

Saya ingin menampilkan kota Bandung di file HTML saya (di dalam komputer saya saja) pada tag div berukuran 600 pixel x 600 pixel. Bagaimana melakukannya? Saya akan tunjukkan kepada Anda,bagaimana menghasilkan peta seperti ini:

Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:

Buat dokumen html
Memasukan library jquery ke dalam dokumen HTML kita
Memasukkan Maps API JavaScript ke dalam dokumen HTML kita.
Buat dokumen jquery (*.js)

Berikut adalah code nya :
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”js/jquery-1.4.1.min.js”></script>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript” src=”gmap.js”></script>
</head>
<body>
<div id=”map_canvas” style=”width:600px; height:300px”>
</div>
</body>
</html>
simpan dengan nama gmap.html
jQuery(document).ready(function() {
initialize();
var map;
function initialize() {
tempat, klik kanan, pilih what’s here?
var myLatlng = new google.maps.LatLng(-6.925362,107.588142);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}
});
Simpan dengan nama gmap.js
-6.925362,107.588142 menempatkan google map pada daerah bandung
untuk mencari letak geographic suatu tempat yang anda inginkan anda dapat mencari nya di map.google.com kemudian pilih

Nah !! sekarang jika anda menginginkan tutorial lengkap anda dapat melihatnya pada link-link tutorialnya. Untuk mencobanya anda tinggal copy paste code yang sudah disediakan pada file *.js. Berikut adalah link-link tentang pemrograman google map api v3: