Mesela haritada iş yerlerinizi adreslerinizi vs işaretlediniz ve tıkladığınızda burası ile ilgili adres iletişim bilgisi website adresi gibi bilgilerin çıkmasını istiyorsunuz. Bu durumda google maps apinin InfoWindow özelliğini kullanabiliriz.

Daha önceki bahsettiğimiz yazı da Ankara iline bir marker eklemiştik ve bu marker için farklı bir icon tanımlamıştık şimdi işe ona bir info window yani bilgi penceresi ekleyelim.

İlk olarak bu pencerede nasıl bir veri gözükecek onu ayarlamamız lazım burada html olarak bilgiyi gösterebilmekteyiz.

var AnkaraInfo = "<h1 style=\"text-align: center;\"><strong>Ankara</strong></h1>" +
"<p>Ankara, Türkiye'nin başkenti ve en kalabalık ikinci ili.[6] Nüfusu 2019 itibarıyla 5.639.076 kişidir. Bu nüfus; 25 ilçe ve bu ilçelere bağlı 1425 mahallede yaşamaktadır. İl genelinde nüfus yoğunluğu 215'tir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve Batı Karadeniz Bölgesi'nde kalan kuzey kesimleri hariç, büyük bölümü İç Anadolu Bölgesi'nde yer alır. Yüzölçümü olarak ülkenin üçüncü büyük ilidir. Etrafı Bolu, Çankırı, Kırıkkale, Kırşehir, Aksaray, Konya ve Eskişehir illeri ile çevrilidir. </p>" +
"<p><strong>Referans</strong>: <a class=\"q ruhjFe NJLBac fl\" href=\"https://tr.wikipedia.org/wiki/Ankara\">Vikipedi</a></p>";

Ankara ile ilgili yukarıdaki gibi bir bilgi hazırladım. Başlık olarak kalın ve ortada olacak şekilde “Ankara” yazacak ve wikipedia üzerinde yazan bir bilgi ekleyip sonundada referans olarakta bilgiyi aldığım web sitesi adresini linkleme işlemini yaptım. Bunların hepsini html olarak hazırlayıp değişkenime ekledim.

Daha sonra info window için bir değişken tanımlıyorum ve google maps apiden oluşturduğum methodunun “content” parametresine göstereceğim içeriği tanımlıyorum.

var AnkaraInfoWindow = new google.maps.InfoWindow({
  content: AnkaraInfo
});

Bundan sonra yapacağımız işlem ankara için oluşturduğumuz marker tıklanması durumunda bu info window tanımlamamızı açmasını sağlamamız gerekmektedir.

marker.addListener('click', function() {
    AnkaraInfoWindow.open(map, marker);
});

Önceki kod tarafında Ankara için oluşturduğumuz marker değikenine “click” için bir listener ekliyoruz ve bunun fonksiyonunda oluşturuduğumuz ankara detay değişkeninin open methodu ile içine haritayı ve markerı ekleyerek açıyoruz.

Son durumda tamamlanan güncel kodumuz aşağıdaki gibi olacaktır.

<html>
  <head>
  <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
  <div>
	  <select id="mapViewType" onchange="changeMapType();">
		  <option value="roadmap">ROAD MAP</option>
		  <option value="satellite">SATELLITE</option>
		  <option value="hybrid">HYBRID</option>
		  <option value="terrain">TERRAIN</option>
	  </select>
  </div>
  <div>
  <input type="range" min="1" max="12" value="6" id="zoomRange">
  </div>
  <div id="map"></div>
  
  <script>
	var map;
	function initMap() {
	  map = new google.maps.Map(document.getElementById('map'), {zoom: 6, center: { lat: 39.515137, lng: 24.979530 }, mapTypeId: 'roadmap', disableDefaultUI: true});
	  
	  var AnkaraInfo = "<h1 style=\"text-align: center;\"><strong>Ankara</strong></h1>" +
		"<p>Ankara, Türkiye'nin başkenti ve en kalabalık ikinci ili.[6] Nüfusu 2019 itibarıyla 5.639.076 kişidir. Bu nüfus; 25 ilçe ve bu ilçelere bağlı 1425 mahallede yaşamaktadır. İl genelinde nüfus yoğunluğu 215'tir. Coğrafi olarak Türkiye'nin merkezine yakın bir konumda bulunur ve Batı Karadeniz Bölgesi'nde kalan kuzey kesimleri hariç, büyük bölümü İç Anadolu Bölgesi'nde yer alır. Yüzölçümü olarak ülkenin üçüncü büyük ilidir. Etrafı Bolu, Çankırı, Kırıkkale, Kırşehir, Aksaray, Konya ve Eskişehir illeri ile çevrilidir. </p>" +
		"<p><strong>Referans</strong>: <a class=\"q ruhjFe NJLBac fl\" href=\"https://tr.wikipedia.org/wiki/Ankara\">Vikipedi</a></p>";
		
	  var AnkaraInfoWindow = new google.maps.InfoWindow({
	    content: AnkaraInfo
	  });
	  
	 var marker = new google.maps.Marker( {position: {lat: 39.925533, lng: 32.866287}, map: map, title: 'Ankara', icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' } );
	 
	 marker.addListener('click', function() {
		AnkaraInfoWindow.open(map, marker);
	  });
	}
	
	function changeMapType() {
		map.setMapTypeId(document.getElementById("mapViewType").value);
	}
	
	var zoomRange = document.getElementById("zoomRange");
	
	zoomRange.oninput = function() {
	  map.setZoom(parseInt(this.value));
	}
  </script>
  
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=GoogleMapsApiKey&callback=initMap" type="text/javascript"></script>
  </body>
  <footer>
  </footer>
</html>

Bu işlemi sorunsuz bir şekilde tamamladıktan sonra haritamızı açıp marker üzerine tıkladığımız zaman bilgi penceremiz açılacaktır.

Yukarıda da gördüğünüz gibi işlemleri sorunsuz bir şekilde tamamladıktan sonra marker bilgi ekranımız tıklandığı zaman gelmektedir.

The post JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaretleyicisine (Marker) Bilgi Penceresi (Info Window) Ekleme İşlemi appeared first on Yunus Emre Araç.