Google Maps Javascript API Info Window Özelliği
Google Maps API Info Window Özelliği
Google Maps Javascript Api kullanarak Google Maps ekleme ve haritada belirli bir konuma marker ekleme konusuna değinmiştik. Bu makalede ise harita üzerine bir marker sembolü ekleyerek bu sembol üzerine tıklandığında bilgi penceresi (info window) açma işlemi gerçekleştireceğiz. Harita uygulamalarında çokça kullandığımız bir info özelliği olduğu için bu bilgiler yararlı olacaktır.
Google Maps Javascript Api V3 içerisinde mevcut InfoWindow sınıfı metodları ve özellikleri işaretçi tıklandığında metin bilgilerini ekran üzerinde göstermek için kullanılmaktadır. Bunu örnek üzerinde açıklayalım.
<script>
var nokta = {lat: 41.012, lng: 28.955};
function haritaYukle() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 11,
center: nokta
});
var infowindow = new google.maps.InfoWindow({
content: ‘Istanbul, Fatih <br>X: ‘ + nokta.lat +
‘<br>Y: ‘ + nokta.lng
});
var marker = new google.maps.Marker({
position: nokta,
map: map,
title: ‘Istanbul, fatih’
});
marker.addListener(‘click’, function() {
infowindow.open(map, marker);
});
}
</script>
Örnek script kodunda belirtildiği gibi öncelikli olarak Google maps temel haritamızın yüklenmesi için haritaYukle fonksiyonu oluşturarak haritamızın konumlanacağı koordinatları belirtiyoruz. Bu kısımda daha önceki makalemizde değindiğimiz gibi haritamızın bulunacağı div’in kimliğini ve harita özelliklerini fonksiyon içerisinde tanımlamalıyız. Daha sonra haritamızda kullanacağımız info window nesnesini oluşturuyoruz. InfoWindow özelliğini kullanabilmemiz için haritaya bir marker eklememiz ve oluşturduğumuz marker nesnesinin click eventinde (info window)bilgi penceresinin açılması gereklidir. Bu nedenle click eventini yakalayan ve bilgi penceresini açan addListener metodunu kullanıyoruz. Bilgi penceresi metin kısmı(content) için haritada işaretlediğim noktanın il, ilçe ve koordinat bilgilerini girdim. Bu açıklama kullanıcının isteğine göre yapılandırılabilir.Bu kısmı oluşturduktan sonra script kodumuzun çalışması için gerekli api referansı ekleyerek aşağıdaki gibi html sayfamızı oluşturuyoruz.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>Info Windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id=”map”></div>
<script>
var nokta = {lat: 41.012, lng: 28.955};
function haritaYukle() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 11,
center: nokta
});
var infowindow = new google.maps.InfoWindow({
content: ‘Istanbul, Fatih <br>X: ‘ + nokta.lat+
‘<br>Y: ‘ + nokta.lng
});
var marker = new google.maps.Marker({
position: nokta,
map: map,
title: ‘Istanbul, Fatih’
});
marker.addListener(‘click’, function() {
infowindow.open(map, marker);
});
}
</script>
<script src=”https://maps.googleapis.com/maps/api/js?callback=haritaYukle”
async defer></script>
</body>
</html>
Google Maps’e Eklenen Marker
Kodu Sayfamıza ekleyip çalıştırdığımızda şekildeki gibi haritamızda eklediğimiz marker gözükmektedir. Marker üzerini tıkladığımızda bilgi penceresi ve metin bilgileri görülecektir. Burada bilmemiz gereken husus haritamızda eklediğimiz işaretçiye tıkladığımızda click eventi üzerinden bilgi penceresinin açılmasını sağlamaktır.
Google Maps’ te Oluşturulan Info Window
