HTML Arka Planına Harita Ekleme: Kapsamlı Bir Kılavuz
Bir web sitesine harita eklemek, kullanıcılara konumunuzu göstermenin ve onlara yol tarifi vermenin harika bir yoludur. HTML’de arka plana harita eklemek nispeten basit bir işlemdir ve bu kılavuzda adım adım nasıl yapılacağını açıklayacağız.
Adım 1: Google Haritalar API’sini Etkinleştirme
İlk adım, Google Haritalar API’sini etkinleştirmektir. Bu, Google Cloud Platform’da bir hesap oluşturmayı ve Haritalar API’sini etkinleştirmeyi içerir.
- Google Cloud Platform’a Kaydolun
- Sol menüden API’ler ve Hizmetler‘i seçin.
- Arama çubuğuna Haritalar yazın ve Haritalar API’si‘ni seçin.
- Etkinleştir düğmesine tıklayın.
Adım 2: API Anahtarını Alın
API’yi etkinleştirdikten sonra, web sitenizde kullanmak için bir API anahtarı almanız gerekir.
- Sol menüden Kimlik Doğrulama‘yı seçin.
- API Anahtarları sekmesine tıklayın.
- Anahtar Oluştur düğmesine tıklayın.
- Web Tarayıcı Anahtarı‘nı seçin ve Oluştur düğmesine tıklayın.
Adım 3: HTML Kodunuzu Güncelleyin
API anahtarınızı aldıktan sonra, HTML kodunuzu güncelleyerek arka plana bir harita ekleyebilirsiniz.
“`html
“`
Yukarıdaki kodda, YOUR_API_KEY‘i API anahtarınızla değiştirmeniz gerekir.
Adım 4: Haritayı Özelleştirme
Haritayı özelleştirmek için initMap() fonksiyonundaki seçenekleri ayarlayabilirsiniz. Örneğin, haritanın merkezini, yakınlaştırma seviyesini ve harita türünü değiştirebilirsiniz.
html
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapTypeId: 'satellite'
});
}
İpuçları
- Haritanın yüklenmesini hızlandırmak için
asyncvedeferözniteliklerini kullanın. - Haritayı duyarlı hale getirmek için
widthveheightözniteliklerini100%olarak ayarlayın. - Haritayı daha etkileşimli hale getirmek için işaretleyiciler, çokgenler ve çizgiler ekleyin.