Hamparan Google Maps
Google Maps - Hamparan
Hamparan adalah objek pada peta yang terikat pada koordinat lintang/bujur.
Google Maps memiliki beberapa jenis hamparan:
- Penanda - Lokasi tunggal di peta. Penanda juga dapat menampilkan gambar ikon khusus
- Polyline - Rangkaian garis lurus pada peta
- Poligon - Serangkaian garis lurus pada peta, dan bentuknya "tertutup"
- Lingkaran dan Persegi Panjang
- Info Windows - Menampilkan konten dalam balon popup di atas peta
- Hamparan khusus
Google Maps - Tambahkan Penanda
Konstruktor Marker membuat marker. Perhatikan bahwa properti posisi harus disetel agar penanda ditampilkan.
Tambahkan penanda ke peta dengan menggunakan metode setMap():
Contoh
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Animasikan Penanda
Contoh di bawah ini menunjukkan cara menganimasikan penanda dengan properti animasi:
Contoh
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Ikon Alih-alih Penanda
Contoh di bawah ini menentukan gambar (ikon) yang akan digunakan sebagai pengganti penanda default:
Contoh
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polyline
Polyline adalah garis yang ditarik melalui serangkaian koordinat dalam urutan yang teratur.
Sebuah polyline mendukung properti berikut:
- path - menentukan beberapa koordinat garis lintang/bujur untuk garis
- strokeColor - menentukan warna heksadesimal untuk garis (format: "#FFFFFF")
- strokeOpacity - menentukan opacity garis (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan bobot goresan garis dalam piksel
- diedit - menentukan apakah baris dapat diedit oleh pengguna (benar/salah)
Contoh
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Poligon
Polygon mirip dengan Polyline karena terdiri dari serangkaian koordinat dalam urutan yang teratur. Namun, poligon dirancang untuk mendefinisikan daerah dalam loop tertutup.
Poligon terbuat dari garis lurus, dan bentuknya "tertutup" (semua garis terhubung).
Sebuah poligon mendukung properti berikut:
- path - menentukan beberapa koordinat LatLng untuk garis (koordinat pertama dan terakhir sama)
- strokeColor - menentukan warna heksadesimal untuk garis (format: "#FFFFFF")
- strokeOpacity - menentukan opacity garis (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan bobot goresan garis dalam piksel
- fillColor - menentukan warna heksadesimal untuk area dalam wilayah tertutup (format: "#FFFFFF")
- fillOpacity - menentukan opacity warna isian (nilai antara 0,0 dan 1,0)
- diedit - menentukan apakah baris dapat diedit oleh pengguna (benar/salah)
Contoh
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Lingkaran
Sebuah lingkaran mendukung sifat-sifat berikut:
- center - menentukan google.maps.LatLng dari pusat lingkaran
- radius - menentukan jari-jari lingkaran, dalam meter
- strokeColor - menentukan warna heksadesimal untuk garis di sekitar lingkaran (format: "#FFFFFF")
- strokeOpacity - menentukan opacity warna stroke (nilai antara 0,0 dan 1,0)
- strokeWeight - menentukan bobot goresan garis dalam piksel
- fillColor - menentukan warna heksadesimal untuk area di dalam lingkaran (format: "#FFFFFF")
- fillOpacity - menentukan opacity warna isian (nilai antara 0,0 dan 1,0)
- dapat diedit - menentukan apakah lingkaran dapat diedit oleh pengguna (benar/salah)
Contoh
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - InfoWindow
Tampilkan InfoWindow dengan beberapa konten teks untuk penanda:
Contoh
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);