Pada postingan ini , saya akan membahas bagaimana cara menambah marker dengan meng-klik kiri maps dan menampilkan marker baru. Penggunaan Event mouse Click hanya berfungsi saat tombol mouse di klik 1 kali, seperti biasa jika 2 kali adalah fungsi zoom in pada maps.
[code]<!DOCTYPE html> <html> <head> <title>Java Sc Developer - MAPS</title> <style type="text/css"> html, body { width: 600px; height: 400px; margin: 0 auto ; padding: 0; } h1 { text-align: center; text-transform: uppercase; } p { text-align: center; font-size: 14px; text-transform: uppercase; } button { background-color: #1d98e0; text-align: center; color: #fff; padding: 8px; border-radius: 10px; } #map { height: 100%; } </style> </head> <script type="text/javascript"> var map , penanda = []; var posisi = {lat:0.512574, lng: 101.448355}; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: posisi }); map.addListener('click', function(event) { tambah(event.latLng); }); } function tambah(location){ var marker = new google.maps.Marker({ position: location, map: map, draggable: true, title: 'Java Source Code' }); penanda.push(marker); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap"> </script> <body> <h1>Menambah Marker Dengan Fungsi Click pada Google Maps</h1> <p>Java Source Code</p> <div id="map"></div> </p> </body> </html>[/code]Penjelasan :
Kita abaikan saja bagian lain dan penjelasan terpenting berada pada bagian javascripnya yang dimulai pada baris 33 sampai 53.
Pada baris 34 terdapat variabel penanda = [] , yaitu merupakan variabel penampung array.
Pada baris 41 sampai 43 merupakan scrip untuk perintah event click pada maps.
Pada baris 45 sampai 53 adalah metode untuk menampilkan data marker yang dimana lokasi dari marker adalah dinamis terganting lokasi yang di klik pada maps. Selain itu pada method ini menggunakan fungsi dragable yang memungkinkan untuk memindahkan tiap marker.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
