Lapisan Peta Google

Google Maps - Lapisan

Lapisan adalah objek yang diikat ke koordinat lintang/luas di peta.

Google Maps memiliki berbagai jenis lapisan:

  • Tanda (Marker) - Satu lokasi tunggal di peta. Tanda juga dapat menampilkan gambar ikon khusus
  • Garis Lurus (Polyline) - Jalur berikutnya di peta
  • Poligon (Polygon) - Jalur berikutnya di peta, bentuknya 'tertutup'
  • Lingkaran dan Persegi (Circle dan Rectangle)
  • Jendela Informasi (Info Windows) - Menampilkan konten di buble di atas peta
  • Lapisan Khusus (Custom overlays)

Google Maps - Menambahkan Tanda

Fungsi konstruktur Marker dapat membuat tanda. Perhatikan, Anda harus menetapkan atribut position untuk menampilkan tanda.

Gunakan metode setMap() untuk menambahkan tanda ke peta:

实例

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - Animasi Tanda

Contoh di bawah ini menunjukkan bagaimana menggunakan atribut animation untuk menetapkan animasi untuk tanda:

实例

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Ganti Tanda dengan Iklan

Contoh di bawah ini menentukan gambar (iklan) yang digunakan untuk menggantikan tanda bawaan:

实例

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - Garis Lurus

Garis lurus adalah jalur yang digambar dengan cara menempatkan sekumpulan koordinat berurutan.

Garis lurus mendukung atribut berikut:

  • path - Tentukan beberapa koordinat lintang/luas untuk jalur
  • strokeColor - Tentukan warna garis dalam format heksadesimal (format: "#FFFFFF")
  • strokeOpacity - Tentukan kecerahan garis (nilai antara 0.0 hingga 1.0)
  • strokeWeight - Tentukan ketebalan garis pengecoran (dalam satuan piksel)
  • editable - Tentukan apakah garis dapat diedit pengguna (true/false)

实例

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Peta Google - Poligon

Poligon mirip dengan jalur, ia terdiri dari sekumpulan koordinat yang diurutkan berurutan. Namun, poligon dirancang untuk mendefinisikan area di dalam lingkaran tutup.

Poligon terdiri dari garis dan bentuknya 'tertutup' (semua garis terhubung).

Lingkaran poligon mendukung properti berikut:

  • path - Tentukan beberapa koordinat lintang dan bujur garis (koordinat pertama dan terakhir sama)
  • strokeColor - Tentukan warna garis dalam format heksadesimal (format: "#FFFFFF")
  • strokeOpacity - Tentukan kecerahan garis (nilai antara 0.0 hingga 1.0)
  • strokeWeight - Tentukan ketebalan garis pengecoran (dalam satuan piksel)
  • fillColor - Tentukan warna area internal yang terkunci dalam format heksadesimal (format: "#FFFFFF")
  • fillOpacity - Tentukan kecerahan warna pengisian (nilai antara 0.0 hingga 1.0)
  • editable - Tentukan apakah garis dapat diedit pengguna (true/false)

实例

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
});

Peta Google - Lingkaran

Lingkaran mendukung properti berikut:

  • center - Tentukan pusat lingkaran dalam google.maps.LatLng
  • radius - Tentukan jari-jari lingkaran dalam satuan meter
  • strokeColor - Tentukan warna garis di sekitar lingkaran dalam format heksadesimal (format: "#FFFFFF")
  • strokeOpacity - Tentukan kecerahan warna pengecoran (nilai antara 0.0 hingga 1.0)
  • strokeWeight - Tentukan ketebalan garis pengecoran (dalam satuan piksel)
  • fillColor - Tentukan warna area internal lingkaran dalam format heksadesimal (format: "#FFFFFF")
  • fillOpacity - Tentukan kecerahan warna pengisian (nilai antara 0.0 hingga 1.0)
  • editable - Tentukan apakah lingkaran dapat diedit pengguna (true/false)

实例

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Peta Google - Jendela Informasi

untuk menampilkan jendela informasi dengan konten teks untuk marker:

实例

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);