Google Haritalar Yığınları

Google Haritalar - Katmanlar

Katman, harita üzerinde enlem/boylam koordinatlarına bağlanmış nesnelerdir.

Google Haritalar, çeşitli türdeki katmanlara sahiptir:

  • İşaret (Marker) - Harita üzerindeki tek bir konum. İşaret, özelleştirilmiş simge görseli de gösterebilir
  • Çizgi (Polyline) - Harita üzerinde bir dizi çizgi
  • Çokgen (Polygon) - Kapalı şekilli harita üzerinde bir dizi çizgi
  • Daire ve Dikdörtgen (Circle ve Rectangle)
  • Bilgi Pencereleri (Info Windows) - İçeriği harita üstündeki popup balonunda gösterir
  • Özel katmanlar (Custom overlays)

Google Haritalar - İşaret ekleme

Marker yapıcı fonksiyonu, işaret oluşturabilir. Lütfen işareti göstermek için position özelliğini ayarlamalısınız.

Marker'ı haritaya eklemek için setMap() yöntemini kullanın:

örnek

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

Google Haritalar - İşaret animasyonu

Aşağıdaki örnek, animation özelliğini kullanarak işarete nasıl animasyon ekleneceğini gösterir:

örnek

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

Google Haritalar - İşaret yerine simge kullanma

Aşağıdaki örnek, varsayılan işaret yerine kullanılacak olan resmi (simgeyi) belirler:

örnek

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

Google Haritalar - Çizgi

Çizgi, sırayla yerleştirilmiş bir dizi koordinatla çizilen bir çizgidir.

Çizgi aşağıdaki özellikleri destekler:

  • path - Belirtilen çizginin birkaç enlem/boylam koordinatı
  • strokeColor - Hattın ondalık sayısal rengini belirler (format: "#FFFFFF")
  • strokeOpacity - Hattın şeffaflığını belirler (0.0 ila 1.0 arasındaki değer)
  • strokeWeight - Hattın kalınlığını belirler (piksel cinsinden)
  • editable - Bu satırın kullanıcı tarafından düzenlenebilir mi (true/false)

örnek

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

Google Haritalar - Çokgen

Çokgen,折ayla benzer, bir dizi sıralı koordinattan oluşur. Ancak, çokgen, kapalı bir alanı tanımlamak için tasarlanmıştır.

Çokgen, doğrudan oluşan ve "kapalı" olan (tüm hatlar birbirine bağlanır) bir şekistir.

Çokgen, aşağıdaki özellikleri destekler:

  • path - Hattın birkaç enlem/boylam koordinatını belirler (ilk ve son koordinat eşittir)
  • strokeColor - Hattın ondalık sayısal rengini belirler (format: "#FFFFFF")
  • strokeOpacity - Hattın şeffaflığını belirler (0.0 ila 1.0 arasındaki değer)
  • strokeWeight - Hattın kalınlığını belirler (piksel cinsinden)
  • fillColor - Kapalı alandaki alanın ondalık sayısal rengini belirler (format: "#FFFFFF")
  • fillOpacity - Doldurma renginin şeffaflığını belirler (0.0 ila 1.0 arasındaki değer)
  • editable - Bu satırın kullanıcı tarafından düzenlenebilir mi (true/false)

örnek

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 Haritalar - Daire

Daire, aşağıdaki özellikleri destekler:

  • center - Döngü merkezinin google.maps.LatLng
  • radius - Döngünün yarıçapını belirler, birim olarak metre
  • strokeColor - Döngü etrafındaki hattın ondalık sayısal rengini belirler (format: "#FFFFFF")
  • strokeOpacity - Hat renginin şeffaflığını belirler (0.0 ila 1.0 arasındaki değer)
  • strokeWeight - Hattın kalınlığını belirler (piksel cinsinden)
  • fillColor - Doldurma alanının ondalık sayısal rengini belirler (format: "#FFFFFF")
  • fillOpacity - Doldurma renginin şeffaflığını belirler (0.0 ila 1.0 arasındaki değer)
  • editable - Kullanıcı tarafından döngü düzenlenebilir mi (true/false)

örnek

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

Google Haritalar - Bilgi Penceresi

marker için metin içeriği olan bilgi penceresi göstermek için:

örnek

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