Bootstrap Google Maps Ekleme

Bootstrap’e Google Haritalar Ekleme: Kapsamlı Bir Kılavuz

Bootstrap, web geliştirmeyi kolaylaştıran popüler bir CSS çerçevesidir. Google Haritalar ise web sitelerine ve uygulamalara etkileşimli haritalar eklemenizi sağlayan güçlü bir araçtır. Bu iki teknolojiyi birleştirerek, web sitenize kolayca özelleştirilebilir ve duyarlı Google Haritaları ekleyebilirsiniz.

Adım 1: Bootstrap ve Google Haritalar API’sini Ekleme

İlk adım, Bootstrap ve Google Haritalar API’sini web sitenize eklemektir.

  • Bootstrap: Bootstrap’in resmi web sitesinden en son sürümü indirin: https://getbootstrap.com/
  • Google Haritalar API: Google Haritalar Platformu’na kaydolun ve bir API anahtarı oluşturun: https://console.cloud.google.com/apis/dashboard

Adım 2: HTML Yapısını Oluşturma

Google Haritası’nı görüntülemek için bir <div> öğesi oluşturun. Bu öğeye, Google Haritalar API’sini yüklemek için bir id atayın.

“`html

“`

Adım 3: Google Haritalar API’sini Başlatma

Google Haritalar API’sini başlatmak için aşağıdaki JavaScript kodunu ekleyin:

“`javascript

“`

Adım 4: Harita Seçeneklerini Özelleştirme

mapOptions nesnesini kullanarak haritanın merkezini, yakınlaştırma seviyesini ve diğer seçenekleri özelleştirebilirsiniz. Daha fazla seçenek için Google Haritalar API referansına bakın: https://developers.google.com/maps/documentation/javascript/reference/map

Adım 5: İşaretleyiciler Ekleme

Haritaya işaretleyiciler eklemek için google.maps.Marker sınıfını kullanın.

“`javascript
// İşaretleyici konumunu ayarlayın
const markerPosition = { lat: 40.7128, lng: -74.0059 };

// İşaretleyiciyi oluşturun
const marker = new google.maps.Marker({
position: markerPosition,
map: map,
});
“`

Adım 6: Bilgi Pencereleri Ekleme

İşaretleyicilere bilgi pencereleri ekleyerek, kullanıcıların işaretleyiciye tıkladıklarında ek bilgiler görmesini sağlayabilirsiniz.

“`javascript
// Bilgi penceresi içeriğini ayarlayın
const infoWindowContent = “

Konum Adı

Konum Açıklaması

“;

// Bilgi penceresini oluşturun
const infoWindow = new google.maps.InfoWindow({
content: infoWindowContent,
});

// Bilgi penceresini işaretleyiciye bağlayın
marker.addListener(“click”, () => {
infoWindow.open(map, marker);
});
“`

Adım 7: Duyarlılık Sağlama

Bootstrap’in duyarlı ızgara sistemi sayesinde, Google Haritalarınız tüm cihaz boyutlarında otomatik olarak yeniden boyutlanır.

Faydalı Kaynaklar

Sonuç

Bootstrap ve Google Haritalar API’sini birleştirerek, web sitenize kolayca özelleştirilebilir ve duyarlı Google Haritaları ekleyebilirsiniz. Bu kılavuzdaki adımları izleyerek, kullanıcılarınıza konumunuzu, işletmenizi veya ilgi çekici noktaları gösteren etkileşimli haritalar sağlayabilirsiniz.

Yayımlandı

kategorisi