Menampilkan Google Map pada Web atau Blog

Apabila kita mempunyai suatu web atau blog, terkadang kita ingin menampilkan atau memberitahu pembaca tentang lokasi suatu tempat, entah itu lokasi yang menarik, atau lokasi tempat bisnis atau rumah kita.

Untuk menambahkan peta Google Map, pertama anda harus mengetahui posisi koordinat lintang dan bujur (latitude dan longitude) dari tempat tersebut. Jika ada belum mengetahui posisinya dapat anda gunakan tool yang ada pada link berikut : Mencari Posisi Latitude Longitude dan Alamat Daerah pada Peta Google Map.

Kemudian tambahkan kode program script berikut ini pada halaman web atau blog Anda. Script tersebut terdiri dari Javascript dan HTML, sehingga harus ditempatkan dengan mode HTML, jangan menuliskan kode program di bawah ini dalam tulisan biasa (Compose) tapi ubah style-nya menjadi HTML.

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id" type="text/javascript">

</script>

<script type="text/javascript">

var geocoder = new google.maps.Geocoder();



function initialize() {

  var latLng = new google.maps.LatLng(-7.8, 110.3666667);

  var map = new google.maps.Map(document.getElementById('mapCanvas'), {

    zoom: 12,

    center: latLng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  });

  var marker = new google.maps.Marker({

    position: latLng,

    title: 'Ambarrukmo Plaza Yogyakarta',

    map: map,

    draggable: true

  });

 

}





// Onload handler to fire off the app.

google.maps.event.addDomListener(window, 'load', initialize);

</script>

  <style>

  #mapCanvas {

    width: 500px;

    height: 300px;

    float: left;

  }

 

</style>



  <br />

<div id="mapCanvas">

</div>