 |
| Google Map |
Berikut saya pasang google map di sini (bukan map embed):
google map di atas bukan sekedar gambar statis. Itu adalah google map yang terpasang pada page ini sehingga bisa di drag ataupin di zoom, meskipun fiturnya tidak sekaya google map secara full. Ini dapat dilakukan dengan kombinasi HTML + Javascript. Javascript di sini juga menggunakan Javascript googlemap API (Application Program Interface).
<html>
<head>
<script type="text/javascript"
src = " http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
var map;
function initialize() {
var LatLong = new google.maps.LatLng(52.561111,13.289444);
var settings = {
zoom:12,
center:LatLong,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvasku"),settings)
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvasku" style="width:800px;height:800px"></div>
</body>
</html>bagi yang sudah fasih html ataupun javascript mungkin akan lihat html code di atas cukup sederhana, tapi belum tentu bagi yang baru saja menyentuh dunia HTML. HTML ini terdiri dari 3 Bagian Utama, yakni HTML, Head, dan Body.
<html>
<head>
</head>
<body>
</body>
</html>di bagian head , javascript akan ditulis. Di sini ada 2 buah javscript yang dipakai
<script type="text/javascript"
src = "http://maps.google.com/maps/api/js?sensor=false&language=en">
</script>script di atas dipakai untuk memanggil googlemap API secara automatis tanpa API key (fitur terbatas). Nah, script yang kedua adalah sebagai berikut
<script>
var map;
function initialize() {
var LatLong = new google.maps.LatLng(52.561111,13.289444);
var settings = {
zoom:12,
center:LatLong,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvasku"),settings)
}
</script>script di atas untuk mensetting dan menampilkan googlemap (dari fungsi-- contoh dari atas fungsi initialize(), bisa pakai apa saja tidak harus kata "initialize" ) ke page dengan menginput berbagai variable yang diperlukan, seperti: koordinat, default zoom, tipe map dan ke bagian body (division) mana map akan ditampilkan.
Di dalam body juga harus di set sebagai tempat munculya map yang sudah disiapkan tadi.
<body onload="initialize()">
<div id="map_canvasku" style="width:800px;height:800px"></div>
</body> body disetting untuk meng-load function initialize () tadi yang digunakan untuk menampilkan map. Div di sini "map_canvasku" adalah bagian tempat map ter-load (harus sama dengan settingan map dari javascript tadi)
EmoticonEmoticon