IP Adresi ile HTML’ye Harita Ekleme
Bir web sitesine harita eklemek, kullanıcıların konumunuzu bulmalarına ve işletmenize veya ilgi çekici yerinize ulaşmalarına yardımcı olabilir. IP adresini kullanarak HTML’ye harita eklemek, kullanıcıların konumlarına göre özelleştirilmiş haritalar görüntülemesini sağlar.
IP Adresini Alma
Bir kullanıcının IP adresini almak için JavaScript kullanılabilir. Aşağıdaki kod parçası, kullanıcının IP adresini alır ve bir değişkene atar:
javascript
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
const ipAddress = data.ip;
});
Google Haritalar API’sini Kullanma
Google Haritalar API’si, web sitelerine ve uygulamalara harita işlevselliği eklemek için kullanılabilir. API’yi kullanmak için bir Google Haritalar API anahtarı oluşturmanız gerekir.
Haritayı Oluşturma
Bir harita oluşturmak için aşağıdaki HTML kodunu kullanabilirsiniz:
“`html
“`
Bu kod, “map” kimliğine sahip bir div öğesi oluşturur. Harita bu div öğesine eklenecektir.
Haritayı Başlatma
Haritayı başlatmak için aşağıdaki JavaScript kodunu kullanabilirsiniz:
javascript
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 0, lng: 0 },
zoom: 1
});
Bu kod, “map” kimliğine sahip div öğesine bir harita başlatır. Harita, varsayılan olarak 0 enlem ve 0 boylam konumunda ve 1 yakınlaştırma seviyesinde merkezlenir.
IP Adresini Kullanarak Kullanıcının Konumunu Belirleme
Kullanıcının IP adresini kullanarak konumunu belirlemek için aşağıdaki JavaScript kodunu kullanabilirsiniz:
javascript
fetch(`https://maps.googleapis.com/maps/api/geocode/json?key=${API_KEY}&latlng=${ipAddress}`)
.then(response => response.json())
.then(data => {
const location = data.results[0].geometry.location;
map.setCenter(location);
map.setZoom(15);
});
Bu kod, Google Haritalar Geocoding API’sini kullanarak IP adresine göre kullanıcının konumunu alır. Konum alındıktan sonra, harita kullanıcının konumuna merkezlenir ve 15 yakınlaştırma seviyesine ayarlanır.
İşaretleyici Ekleme
Haritaya bir işaretleyici eklemek için aşağıdaki JavaScript kodunu kullanabilirsiniz:
javascript
const marker = new google.maps.Marker({
position: location,
map: map
});
Bu kod, kullanıcının konumuna bir işaretleyici ekler.