Menambah Marker dan Menampilkan InfoWindows di Google Maps
Halo Semuanya,,, Kembali lagi dengan saya Admin SagalaTutorial
Kali ini saya akan melanjutkan pembahasan mengenai Google maps API, untuk lebih jelasnya bagi yang belum tahu apa itu Google Maps API silahkan membaca postingan saya sebelumnya.
Marker mengidentifikasi lokasi pada peta. Secara default, marker menggunakan gambar standar. Marker bisa menampilkan gambar custom, dalam hal ini maka biasanya disebut "ikon". Marker dan ikon adalah objek bertipe Marker. Anda bisa mengatur ikon custom dalam konstruktor marker, atau dengan memanggil setIcon() pada marker. (Doc Google Maps API)
Sedangkan untuk penjelasan InfoWindows adalah sebagai berikut :
InfoWindow menampilkan konten (biasanya teks atau gambar) dalam jendela popup di atas peta, pada lokasi yang diberikan. Jendela informasi memiliki area konten dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditetapkan pada peta. Biasanya Anda melekatkan jendela informasi ke marker, namun Anda juga bisa melekatkan jendela informasi ke garis lintang/garis bujur tertentu. (Doc Google Maps API)
Sekarang akan kita coba praktekan bagaimana caranya menampilkan marker dan infowindow ke Maps kita.
Untuk melihat hasilnya seperti ini :
Baca Juga : Menampilkan Google Maps pada halaman WebsitePada postingan yang lalu kita telah belajar bagaimana cara menampilkan google maps pada halaman website kita. Sekarang saya akan sedikit membahas tentang Marker di google maps.
Marker mengidentifikasi lokasi pada peta. Secara default, marker menggunakan gambar standar. Marker bisa menampilkan gambar custom, dalam hal ini maka biasanya disebut "ikon". Marker dan ikon adalah objek bertipe Marker. Anda bisa mengatur ikon custom dalam konstruktor marker, atau dengan memanggil setIcon() pada marker. (Doc Google Maps API)
Sedangkan untuk penjelasan InfoWindows adalah sebagai berikut :
InfoWindow menampilkan konten (biasanya teks atau gambar) dalam jendela popup di atas peta, pada lokasi yang diberikan. Jendela informasi memiliki area konten dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditetapkan pada peta. Biasanya Anda melekatkan jendela informasi ke marker, namun Anda juga bisa melekatkan jendela informasi ke garis lintang/garis bujur tertentu. (Doc Google Maps API)
Sekarang akan kita coba praktekan bagaimana caranya menampilkan marker dan infowindow ke Maps kita.
Marker
var marker = new google.maps.Marker({
position : new google.maps.LatLng(-6.712937, 108.531947),
map : map,
title : "Hello Cirebon !"
});
InfoWindow
InfoWindow bekerja seperti Tooltips yaitu jika di klik maka akan menampilkan konten pada sebuah dialog box kecilvar contentinfo =
'
TES INFO WINDOW
'+
'Hello Cirebon !
'+
'This is a link
';
untuk dapat meload Marker dan InfoWindow yang telah kita buat script seperti ini :
var infowindow = new google.maps.InfoWindow({
content : contentinfo
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
Untuk melihat hasilnya seperti ini :
Source Code Lengkap
<html>
<head>
</head>
<body>
</body>
</html>
Oke sekian tutorial kali ini dan sampai jumpa di tutorial-tutorial berikutnya.
Thank's to jagocoding.com
