Home > Google Map > Menampilkan Google Map pada Website

Menampilkan Google Map pada Website

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… Thanx… Gbu…

Categories: Google Map
  1. 30 December 2013 at 13:20

    minta bantuannya,,sudah sya coba koq gag bisa ya

  2. zeke
    7 August 2012 at 10:33

    nice tutorial gan,😀

  3. Baeqoenny al ferzzy
    15 January 2012 at 08:48

    Bagi info nya lagi dounk…!

  4. 21 December 2011 at 04:01

    mantap sekali gan info nya …

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: