Menampilkan Google Map pada Website
Posted by Unknown 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 online. Untuk 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” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>
<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>
<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” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>
<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>,
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.
0 comments:
Post a Comment