Cara Membuat Penanda Lokasi / Marker di Website : Google Map

Google Maps di Website:

Cara Menambahkan Google Maps di Website
Cara Membuat Marker Maps di Website
Membuat Jendela Informasi Pada Lokasi yang Sudah Ditandai

Membuat Penanda Lokasi / Marker (Bagian 2)

Apakah itu penanda lokasi / marker? Penanda lokasi atau selanjutnya akan disebut marker adalah salah satu fitur yang ada pada Google Maps untuk menandai lokasi tertentu.

Artikel ini merupakan artikel lanjutan dari artikel sebelumnya yaitu Menampilkan Google Maps di Website (Bagian 1). Jadi, jika kalian belum membaca bagian 1, ada baiknya kalian membaca dulu artikel bagian 1-nya supaya bisa mengikuti tutorial kali ini. Kita masuk ke bagian 2 yaitu bagaimana cara membuat marker pada google map yang tersedia di website kita? Let’s go.

Siapkan kode kalian yang sudah kalian gunakan sebelumnya (jika belum ada, bisa mengambil kode yang ada di bagian 1), lalu ikuti langkah – langkah berikut :

Membuat Objek Marker

Untuk membuat marker pada Google Maps website kalian, kalian perlu membuat objeknya terlebih dahulu menggunakan kode seperti berikut :

var 	marker = new google.maps.Marker({
    	position: new google.maps.LatLng(-6.203035,106.846739),
    	map: peta
});

Kode pembuatan objek yang kita gunakan diatas memiliki 2 properti, yaitu :

position

Properti ini digunakan untuk mengatur dimana posisi marker pada peta kita saat website pertama kali dibuka. Pengaturan yang saya gunakan diatas adalah mengatur titik awal posisi marker sama dengan titik center pengaturan Google Maps yang ada di kode sebelumnya (di bagian 1). Pengaturan posisi marker ini menggunakan koordinat longitude dan latitude, yaitu pada angka (-6.203035,106.846739) diatas.

map

Properti ini digunakan untuk menyatakan bahwa marker ini akan ditempatkan pada objek variabel peta, yaitu variable yang kita gunakan untuk membangun objek Google Maps kita.

2. Meletakan Kode Pembuatan Objek Marker

Kode pembuatan objek marker kita tadi, akan kita letakan setelah kode pembuatan objek peta. Sehingga kode lengkapnya menjadi seperti berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Latihan Menambahkan Google Maps</title>
  
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>
        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(-6.203035,106.846739),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
		
		var marker= new google.maps.Marker({
			position: new google.maps.LatLng(-6.203035,106.846739),
			map: peta
		});
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  
</head>
<body>

    <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Dan hasilnya akan menjadi seperti ini :

Hore marker sudah muncul di Google Maps website kalian.

Lalu? Apakah sudah selesai? Kalau kalian sudah cukup untuk seperti ini saja berarti cukup sampai disini saja, tetapi masih ada lho beberapa hal tambahan lain yang perlu kalian perhatikan juga untuk membuat marker kalian menjadi lebih baik. Disini akan saya sampaikan beberapa hal seperti berikut :

Marker dibuat Saat Meng-Klik Posisi Tertentu Pada Google Maps

Jika kita hanya menggunakan kode seperti sebelumnya, posisi marker hanya akan bisa kita ubah melalui source kode kita, tapi bagaimana apabila kita ingin menentukan posisi markernya sesuai dengan keinginan hanya dengan di-klik saja?

Untuk bisa melakukan hal tersebut, kita perlu menambahkan fungsi sebagai berikut :

function posisiMarker(peta, posisiTitik){
    var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
}

Pada fungsi diatas, kita memakai 2 properti yaitu :

position

Properti ini digunakan untuk menentukan kalau posisi marker kita nanti akan menjadi posisi titik dari yang kita klik.

map

Properti ini digunakan untuk menentukan kalau posisi marker kita nanti akan diletakan di objek peta.

Setelah fungsinya kita buat, fungsinya harus kita panggil menggunakan kode seperti berikut :

google.maps.event.addListener(peta, 'click', function(event) {
    posisiMarker(this, event.latLng);
});

Berikut contoh kode lengkapnya saat dua fungsi itu ditambahkan kedalam kode kalian :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Latihan Menambahkan Google Maps</title>
  
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>
	
		function posisiMarker(peta, posisiTitik){

		var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
	}

        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(-6.203035,106.846739),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
		
		google.maps.event.addListener(peta, 'click', function(event) {
		posisiMarker(this, event.latLng);
	});
        }


        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  
</head>
<body>


    <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Dan hasilnya akan menjadi seperti ini:

Coba perhatikan peta kalian, marker tidak muncul saat pertama kali dimuat di browser. Setelah kalian klik maka marker akan dibuat ditempat yang telah kalian klik.

Itulah tadi cara untuk membuat marker pada posisi yang kita klik pada peta, tapi dengan metode ini ternyata posisi marker bisa lebih dari satu tergantung posisi klik yang terus kita lakukan dan tidak menghapus posisi marker yang sebelumnya. Lalu bagaimana supaya jumlah marker yang bisa diberikan hanya satu saja? Simak poin berikutnya ya.

Marker yang dibuat Menggunakan Klik Hanya Satu Saja

Jika sebelumnya kita bisa membuat marker lebih dari satu tergantung dari jumlah klik kita, sekarang bagimana jika hanya kita ingin memunculkan hanya satu dan terus berpindah sesuai dengan update klik kita? Berikut caranya :

Kita harus menggunakan fungsi IF dan ELSE pada kode posisiMarker() kita, sehingga kodenya menjadi seperti ini :

var marker;
function posisiMarker(peta, posisiTitik){
    
    if( marker ){
      marker.setPosition(posisiTitik);
    } else {
      marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
      });
    }
}

Jika kode diatas dibaca secara sederhana, kira-kira artinya seperti ini :

“ Jika (IF) terdapat marker di peta, maka pindahkan posisinya.
Selain itu (ELSE) maka buat yang baru. ”

Berikut contoh kode lengkapnya setelah kode itu ditambahkan kedalam kode kalian :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Latihan Menambahkan Google Maps</title>
  
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>
	
		var marker;
		function posisiMarker(peta, posisiTitik){
    
		if( marker ){
			marker.setPosition(posisiTitik);
		} else {
			marker = new google.maps.Marker({
			position: posisiTitik,
			map: peta
			});
			}
		}

        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(-6.203035,106.846739),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
		
		google.maps.event.addListener(peta, 'click', function(event) {
		posisiMarker(this, event.latLng);
		});
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  
</head>
<body>

    <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Dan hasilnya coba kalian akan bisa melakukan pointing marker dengan cara klik, tetapi hanya 1 marker yang muncul.

PENUTUP

Itulah tadi cara untuk menambahkan marker atau penanda lokasi pada Google Maps website kalian. Demikian artikel bagian 2, akan dilanjutkan ke Bagian 3 tentang Membuat Jendela Informasi Pada Lokasi yang Sudah Ditandai. Stay Tune!

Cara Membuat Penanda Lokasi / Marker di Website : Google Map

Jenis Jenis Basis Data: Struktur dan Contohnya

Simple Network Management Protocol (SNMP): Apa itu – Versi dan Komponennya

You may also like