HTML siteye harita ekleme: internet teknolojilerinin gelişimiyle kolaylaşması ile birlikte, insanlar web sitelerine ziyaretçilerine etkileşimli ve kullanışlı bir deneyim sunmak için çeşitli araçlar ekleyebilmektedir. Bu araçlardan biri de haritalardır. Haritalar, ziyaretçilere bir yerin konumunu göstermek, rotaları belirlemek veya yakındaki ilgi çekici noktaları bulmak gibi birçok faydalı işlev sunar. Bu makalede, HTML siteye harita ekleme nasıl bir harita ekleyebileceğinizi adım adım öğreneceksiniz.
HTML Siteye Harita Ekleme
Adım 1: Google Haritalar API’si Oluşturma
İlk adım olarak, bir Google Haritalar API’si oluşturmanız gerekmektedir. Google Cloud Platform Console’a giderek bir hesap oluşturun ve yeni bir proje başlatın. Ardından, “API ve Hizmetler” bölümüne gidin ve “API’ları Keşfet” seçeneğini seçin. Google Haritalar API’sini bulun ve etkinleştirin. API anahtarınızı almak için “Kimlik Doğrulama” bölümüne gidin. Bu API anahtarı, haritaları web sitenize entegre etmek için kullanılacaktır.
Adım 2: HTML Dosyasını Oluşturma
HTML Siteye Harita Eklemek için, Haritayı eklemek istediğiniz web sayfasının kaynak koduna geçin. Başlamak için basit bir HTML dosyası oluşturun veya mevcut HTML dosyanızı düzenleyin. Bir metin düzenleyici kullanarak, <head> etiketi içinde aşağıdaki <script> etiketini ekleyin:
htmlCopy
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>Yukarıdaki kodda, “YOUR_API_KEY” yerine önceki adımda oluşturduğunuz Google Haritalar API anahtarınızı yerleştirmeniz gerekmektedir. Bu script etiketi, Google Haritalar API’sini sayfanıza dahil etmek için kullanılır.
Adım 3: Harita Bölgesini Tanımlama
Harita bölgesini tanımlamak için HTML dosyanızdaki <body> etiketi içinde bir <div> elementi oluşturun. Bu <div> elementine bir ID atayın ve harita boyutlarını belirtin. Örneğin:
htmlCopy
<div id="harita" style="width: 100%; height: 400px;"></div>Yukarıdaki kodda, “harita” ID’sine sahip bir <div> elementi oluşturduk ve genişlik ve yükseklik değerlerini piksel cinsinden belirttik.
Adım 4: JavaScript Kodunu Eklemek
Haritayı oluşturmak ve görüntülemek için JavaScript kodunu eklememiz gerekmektedir. HTML dosyanızın <head> etiketi içine aşağıdaki kodu ekleyin:
htmlCopy
<script>
function initMap() {
var myLatLng = {lat: 40.712776, lng: -74.005974}; // Başlangıç konumu koordinatları
var map = new google.maps.Map(document.getElementById('harita'), {
center: myLatLng,
zoom: 12 // Yakınlaştırma düzeyi
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'New York City' // İşaretçi başlığı
});
}
</script>
Yukarıdaki kod, bir initMap() fonksiyonu tanımlar. Bu fonksiyon, haritayı oluşturur, başlangıç konumunu belirler ve bir işaretçi ekler. Konum için koordinatları ve işaretçi başlığınıvermek üzere özelleştirebilirsiniz.
Adım 5: Haritayı Görüntüleme
Son adımda, haritayı web sayfanızda görüntülemek için JavaScript kodunu tetiklemeniz gerekmektedir. HTML dosyanızın <body> etiketi içinde aşağıdaki kodu ekleyin:
htmlCopy
<script>
// Sayfa yüklendiğinde haritayı görüntüle
window.onload = function() {
initMap();
};
</script> Yukarıdaki kod, sayfa yüklendiğinde initMap() fonksiyonunu çağırarak haritayı görüntüler.
Adım 6: Web Sayfasını Tarayıcıda Açma HTML Siteye Harita Ekleme
HTML Siteye Harita Eklemek için dosyanızı kaydedin ve bir web tarayıcısında açın. Haritanın görüntülendiğini ve belirttiğiniz konumun işaretçiyle temsil edildiğini görmelisiniz.
Unutmayın, bu sadece temel bir örnek ve Google Haritalar API’sinin daha gelişmiş özelliklerini keşfedebilirsiniz. Ayrıca, harita stillerini, işaretçileri ve diğer öğeleri özelleştirebilirsiniz. Google Haritalar API dokümantasyonunu inceleyerek daha fazla bilgi edinebilirsiniz.
Umarım bu makale size yardımcı olmuştur. Başarılar dilerim!
Sitenize Google haritaları ekledikten sonra nasıl gözüktüğünü merak ediyorsanız iletişim sayfamızda bulunan haritayı inceleyebilirsiniz…
