Menampilkan Peta Google Maps V3 Dalam Web Browser

Contoh Kasus:

Saya ingin menampilkan Peta dari Kebun Raya Bogor dengan Latitude=”-6.599813″ dan Longitude = “106.799981” dalam web browser seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Buatlah sebuah file bernama peta.html dan masukkan kode berikut ini:

<html> 

<head>

<style type=”text/css”>

#petaBogor { height: 50%; width:50% }

</style>

<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false”>    </script>

<script type=”text/javascript”>

function initialize() {

var opsi = {

center: new google.maps.LatLng(-6.599813, 106.799981),

zoom: 15,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById(“petaBogor”),    opsi);

}

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

</script>

</head>

<body>

<div id=”petaBogor” />

</body>

</html>

Keterangan:

  • <script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false”>, Kode ini digunakan untuk memanggil Google Maps API, gantilah API_KEY dengan API KEY yang kamu punya, jika belum punya silahkan baca artikel ini.
  • new google.maps.LatLng(-6.599813, 106.799981), Kode ini digunakan untuk menentukan titik latitude dan longitude.
  • zoom: 15, Kode ini untuk pengecilan atau perbesaran tampilan daerah dalam peta, semakin kecil nilainya maka semakin jauh dan jika semakin besar nilainya maka semakin dekat.
  • mapTypeId: google.maps.MapTypeId.ROADMAP, Kode ini digunakan untuk menampilkan tipe MAP normal.
  • new google.maps.Map(document.getElementById(“petaBogor”),    opsi), Kode ini digunakan untuk membuat peta dan menampilkannya dalam elemen HTML yang mempunyai id=”petaBogor”.

Hasil:

Bukalah file diatas melalui browsermu dan lihatlah hasilnya apakah petanya sudah tampil.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *