High Quality
Open the downloaded document, and select print from the file menu (PDF reader required).
TTTuuut t t ooorrriiiaaalllDDDaaasssaaarrr PPPeeemmmrrrooogggrrraaammmaaannn GGGoooooogggllleeeMMMaaapppsss A A APPPIII
Latar belakang
Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat menambahkan fitur GoogleMaps dalam web Anda sendiri dengan Google Maps API. Google Maps API adalah library JavaScript.Menggunakan/memprogram Google Maps API sangat mudah. Yand Anda butuhkan adalah pengetahuantentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API Andadapat menghemat waktu dan biaya Anda untuk membangun aplikasi peta digital yang handal, sehinggaAnda 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. Versi ini, katanya, akan tampil lebih cepat dari versisebelumnya khususnya untuk browser ponsel. Ya, ponsel, Anda bisa membangun situs web yangdilengkapi peta untuk iPhone dan ponsel dengan system operasi Android.
Bagaimana memulainya?
Saya ingin menampilkan kota Depok di file HTML saya (di dalam komputer saya saja) pada tag divberukuran 600 pixel x 600 pixel. Bagaimana melakukannya? Saya akan tunjukkan kepada Anda,bagaimana menghasilkan peta seperti ini:
Menggunakan Google Maps API
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:1.
Memasukkan Maps API JavaScript ke dalam HTML kita.2.
Membuat element div dengan nama map_canvas untuk menampilkan peta.3.
Membuat beberapa objek literal untuk menyimpan property-properti pada peta.4.
Menuliskan fungsi JavaScript untuk membuat objek peta.5.
Meng-inisiasi peta dalam tag body HTML dengan event onload.Beginilah kode program dasarnya:
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Langkah 1 --> <script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></script> <script type="text/javascript">// Langkah 4 functioninitialize() {varlatlng =newgoogle.maps.LatLng(-6.4, 106.8186111);
varmyOptions = {zoom: 13,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};// Langkah 3 varmap =newgoogle.maps.Map(document.getElementById("map_canvas"),
myOptions);}</script> </head> <!-- Langkah 5 --> <body onload="initialize()">
<!-- Langkah 2 --> <div id="map_canvas" style="width:600px; height:600px"></div>
</body> </html>
Perhatikan urutan langkah-langkahnya yang saya tuliskan dalam komentar HTML dan JavaScript kodeHTML di atas.
Add a Comment
Onet Gbleft a comment
Masmuh Vítězstvíleft a comment
deleted_fbuser_1301170965left a comment
kuman113left a comment
wahjusaputroleft a comment
wahjusaputro replied: