Menampilkan Google Map pada Website

Posted by Suhaivi Hamdan on 4:01 AM with No comments
Akhirnya…setelah 5 bulan tidak nge-blog, artikel blog ini bertambah 1 lagi (walaupun cuma 1 tapi pantas disyukuri. Artikel kali ini akan membahas tentang Google Map yang lagi banyak digunakan saat ini, baik di smartphone, tablet, maupun PC/Laptop… Artikel ini akan membahas tentang bagaimana menampilan Google Map pada website…
Sebelum kita mengetahui lebih lanjut cara untuk menampilakn Google Map, ada baiknya kita mengenal Google Map terlebih dahulu… Menurut Wikipedia, Google Map adalah salah satu layanan jasa peta globe dari Google yang ditampilkan secara virtual yang sifatnya gratis dan onlineUntuk menampilkan Google Map pada Website yang akan kita buat, maka kita membutuhkan Application Programming Interface  (API)  atau dapat dikatakan semacam source code yang merupakan komponen dari Google Map yang akan disisipkan pada halaman HTML untuk dihubungkan dengan Google. Google Map API yang akan kita gunakan berupa JavaScript.
Pertama kita membuat file gmap.html
<html>
<head>
<title>Menampilkan Google Web Pada Website by Erick Alfons Lisangan</title>
<link href=”http://code.google.com/apis/maps/documentation/javascript/examples/default.css&#8221; rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script&gt;
<script type=”text/javascript”>
var marker;
var map;//lokasi kota Makassar pada Google Map
var makassar = new google.maps.LatLng(-5.1205733, 119.4875668); //lokasi kota Makassarfunction initialize()
{
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: makassar
};map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions); //posisi balon
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: makassar
});
google.maps.event.addListener(marker, ‘click’, toggleBounce);
}
function toggleBounce()
{
if (marker.getAnimation() != null)
marker.setAnimation(null);
else
marker.setAnimation(google.maps.Animation.BOUNCE);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”map_canvas” style=”width: 500px; height: 400px;”>map div</div>
</body>
</html>
Pada source code di atas, kita dapat melihat terdapat tag   <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script&gt;, arti dari tag tersebut adalah untuk menghubungi API dari Google Map sehingga memungkinkan ditampilkannya Google Map pada website yang kita buat. Jika file tersebut dijalankan, maka akan dihasilkan tampilan seperti di bawah ini:
 
Bagaimana?? Mudah kan?? Dengan memanfaatkan Google Map API, maka kita dapat menampilkan Google Map pada Website yang akan kita buat…
Nantikan artikel saya yang selanjutnya y?? Semoga artikel ini dapat bermanfaat bagi Anda.