Dokumen Sederhana Google Maps
Selain mendapatkan API Key, Anda juga diberikan contoh simple yang dapat menampilkan peta sederhana. Contoh berikut halaman peta yan gberpusat di Palo Altom California:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Elemen fundamental dalam aplikasi Google Maps API adalah “peta” itu sendiri. Tulisan ini akan membahas penggunaan fundamental obyek GMap2dan operasi dasar peta.
Loading Google Maps API Key
Key yang telah Anda peroleh harus dimasukkan ke aplikasi. Key tersebut dimasukkan mengantikan variabel key.
<script src="http://maps.google.com/maps?file=api&v=2&key=&sensor=true_or_false"
type="text/javascript">
</script>
URL http://maps.google.com/maps?file=api&v=2&key=abcdefg menunjukkan ke lokasi file JavaScript yang didalamnya termasuk semua simbol definisi yang diperlukan menggunakan Google Maps API. Halaman Anda harus berisi tag skrip yang menunjuk ke URL ini, menggunakan kunci yang Anda terima ketika mendaftarkan API. Dalam kasus diatas kuncinya adalah “abcdefg”. Setelah key yang didapat diperoleh dan dimasukkan, maka hasilnya adalah sebagai berikut:
<script src="http://maps.google.com/maps?file=api&v=2&key= ABQIAAAAJK9VAl7f5EbkTYtTgYmfGRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiZayCg1x-0OTg2PBrceaMzyZjNQ &sensor=true_or_false"
type="text/javascript">
</script>
Catatan: Key di atashanya berlaku untuk domain http://localhost
Parameter sensor berisi truedigunakan untuk menggunakan sensor lokasi , misalnya GPS (jika ada, misalnya jika aplikasi web based kita diakses dengan ponsel tertentu yang memiliki GPS).
Tidak ada komentar:
Posting Komentar