Cara menambahkan marker google map pada website

Salah satu penyedia peta digital yang bersifat free adalah layanan Google Maps yang paling sering digunakan oleh developer web.

Dalam tutorial kali ini, kita akan menambahkan google map ke dalam website, kemudian memberi marker untuk sebuah lokasi. Disaat marker tersebut diklik, maka akan menyajikan sebuah informasi tertentu.

Berikut ini adalah hasil akhir yang akan kita diskusikan dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Tahapan membuat marker pada Google Map

1. Load script dari Google Maps Server

Agar kita terhubung ke google map server, script berikut harus disertakan pada web anda :

<script 
 src="http://maps.google.com/maps/api/js?sensor=trueorfalse">
</script>

Pada bagian akhir dari script terdapat parameter sensor : true or false yang bertujuan untuk memberitahukan google dalam menentukan lokasi dari user. Karena dalam tutorial ini kita akan membuat sendiri lokasinya, maka untuk parameter sensor diset : false.

2. Mengeset posisi kordinat lokasi (latitude dan longtitude)

Disini kita perlu mengetahui kordinat dari lokasi yang ingin kita beri marker. Untuk itu silahkah buka url :https://www.google.co.id/maps, lalu klik lokasi/posisi yang diinginkan, kemudian copy kordinatnya dan letakkan pada bagian latitude dan longtitude pada script berikut :

var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Misal kordinat latitude dan longtitude ( 5.550176, 95.319263), maka scriptnya menjadi :

var position = new google.maps.LatLng(5.550176, 95.319263)

3. Menambahkan properti pada objek map option

var myOptions = {
 zoom: 8,
 center: position,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

Untuk objek map option memiliki banyak properti, namun kita hanya memerlukan tiga properti saja:

center: objek google.maps.LatLng (lebih lanjut tentang ini nanti) digunakan untuk mengatur pusat peta awal.
mapTypeId: objek google.maps.MapTypeId, yang digunakan untuk mengatur jenis peta. Misalnya, Anda dapat melihat peta dengan peta jalan atau peta satelit.
zoom: angka positif yang menetapkan zoom awal peta (nilai dari 0 s.d 18)

4. Create sebuah map

Pada langkah ke-4 ini kita akan menampilkan peta setelah kita set posisi dan properti dari map option:

var map = new google.maps.Map(
 document.getElementById("map_canvas"),
 myOptions);

5. Membuat marker pada posisi yang dipilih

Pada langkah 1 kita telah memilih lokasi kordinatnya, script dibawah ini pembuatan markernya:

var marker = new google.maps.Marker({
 position: position,
 map: map,
 title:"This is the place."
});

6. Menambah informasi ketika marker diklik

var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

7. Menambah event click pada marker

google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker);     
});

Script ini untuk merespon marker yang klik, kemudian menampilkan informasi yang terdapat dalam variabel infowindow.

Kode lengkap untuk membuat marker pada Google Map

Dalam contoh ini, kita akan membuat marker untuk posisi kordinat kota Banda Aceh. Begitu diklik pada bagian marker, maka akan ditampilkan informasi "Ibukota Provinsi Aceh" seperti Gambar.1 diatas :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Load Map </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- akhir dari Bagian js -->
    <script 
        src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script>
        function initialize() {
        var position = new google.maps.LatLng(5.550176, 95.319263);
        
        var myOptions = {
          zoom: 8,
          center: position,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(
            document.getElementById("map_canvas"),
            myOptions);

        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title:"This is the place."
        });  

        var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          
        });

      }
    </script>
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->   
<div class="container" style="margin-top:10px"> 

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Marker Google Maps</div>
                    <div class="panel-body">
                        <div id="map_canvas" style="width:700px; height:500px"></div>
                    </div>
            </div>
        </div>  
    </div>
</div>  
</body>
</html>