JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi

Merhaba arkadaşlar bugün sizlere Javascript ile google maps api kullanarak haritaya nasıl işaretleyici yani marker ekleme işleminden bahsedeceğim. Daha önce JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritanın Görünümünü Yakınlaştırıp Uzaklaştırma Özelliği konusunu anlatmıştım şimdi o kodlar üzerinden devam edeceğim.

Şimdi haritamıza herhangi bir konum için işaretleyiciyi yani marker nasıl ekleyeceğimizden bahsedeceğim. Bunun için google.maps.Marker servisini kullanmamız gerekmektedir. Burada bu servise işaretlenecek konum için “Laitude” ve “Longitude” konum bilgilerini işaretleme yapılacak harita bilgisini ve fare ile üstüne gelindiğinde çıkacak title bilgisini girmeniz gerekmektedir. Ben örnek olarak Ankara ilimize bir işaretleyici ekleyerek devam edeceğim.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  title: 'Ankara'
});

var marker = new google.maps.Marker({

position: {lat: 39.925533, lng: 32.866287},

map: map,

title: 'Ankara'

});

Yukarıda da gördüğünüz gibi “marker” diye bir değişken oluşturarak bu değişkene “position” parametresine lokasyon bilgimizi, “map” parametresine de harita değişkenimizin bilgisini ve en son olarakta “title” bilgisine de yazmak istediğimiz detayı ekledik.

Bunun altermatifi olarak harita setleme işlemini daha sonra da yapabiliriz.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  title: 'Ankara'
});

marker.setMap(map);

var marker = new google.maps.Marker({

position: {lat: 39.925533, lng: 32.866287},

title: 'Ankara'

});

marker.setMap(map);

Yukarıda da gördüğünüz gibi harita bilgisini parametre olarak vermedim ama daha sonra haritamda görünebilmesi için marker bilgimizde haritamızı tanımlamamaız gerekmektedir. Ben ilk adımdaki kod ile ilerliyorum ve haritam yüklendiğinde işaretleyicimin de gelmesini istediğim için bunu haritamın yüklenmesini sağlayan “initMap” methodunun içine ekliyoruz.

Son durumda 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 marker = new google.maps.Marker( {position: {lat: 39.925533, lng: 32.866287}, map: map, title: 'Ankara'} );
	}
	
	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>

<html>

<head>

<style>

#map {

height: 400px;

width: 100%;

}

</style>

</head>

<body>

<div>

<option value="satellite">SATELLITE</option>

<option value="hybrid">HYBRID</option>

<option value="terrain">TERRAIN</option>

</select>

</div>

<div>

</div>

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 marker = new google.maps.Marker( {position: {lat: 39.925533, lng: 32.866287}, map: map, title: 'Ankara'} );

}

function changeMapType() {

map.setMapTypeId(document.getElementById("mapViewType").value);

}

var zoomRange = document.getElementById("zoomRange");

zoomRange.oninput = function() {

map.setZoom(parseInt(this.value));

}

</script>

</body>

</footer>

</html>

Bu kodu çalıştırdığımız zaman haritamız ilk yüklendiğinde aşağıdaki gibi görünecektir.

Gördüğünüz gibi marker yani işaretleyicimiz tam Ankara ilinin üstünde ve fare ile üstüne geldiğimizde yazdığımız bilgi görünmektedir.

Siz bu işaretleyiciye ekstra olarak anmimasyonda ekleyebilirsiniz. Bunun için marker servisine “animation” parametresine nasıl bir animasyonla yükleneceği bilgisini girmeniz gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  animation: google.maps.Animation.DROP,
  title: 'Ankara'
});

var marker = new google.maps.Marker({

position: {lat: 39.925533, lng: 32.866287},

map: map,

animation: google.maps.Animation.DROP,

title: 'Ankara'

});

yukarıda gördüğünüz gibi parametreye yine google maps api tarafından bir değer vermek gerekmektedir. Bu animasyon özelliği için iki tane seçenek vardır. Bunlar:

google.maps.Animation.DROP
google.maps.Animation.BOUNCE

Bunun dışında birde eklediğiniz marker yani işaretleyicinin fare yardımı ile yerinin değiştirilip değiştirilmeyeceği özelliğini ekleyebilirsiniz. Bu özellik genellikle harita üzerinde konum seçme gibi durumlarda ihtiyaç duyulmaktadır. Bu özellik parametresi belirtilmediği zaman kapalı olarak gelmektedir. Bu özelliği açmak için “draggable” parametresini “true” olarak tanımlamamız gerekmektedir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  draggable: true,
  title: 'Ankara'
});

var marker = new google.maps.Marker({

position: {lat: 39.925533, lng: 32.866287},

map: map,

draggable: true,

title: 'Ankara'

});

Bu özellik kullanım örneğini de yukarıda görebilirsiniz.

Bunların yanı sıra en güzel özelliklerden biride bu marker yani işaretleyici görseli olan iconu değiştiebiliyor olmanız. Bunun için ise marker servisine “icon” parametresini icon url adresini vererek yapılabilmektedir. Eğer bu parametere hiç kullanılmazsa direk olarak yukarıda gördüğünüz gibi default google maps marker iconu gelecektir.

var marker = new google.maps.Marker({
  position: {lat: 39.925533, lng: 32.866287},
  map: map,
  icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
  title: 'Ankara'
});

var marker = new google.maps.Marker({

position: {lat: 39.925533, lng: 32.866287},

map: map,

icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',

title: 'Ankara'

});

Yukarıdaki icon özelliğini sadece kullandığımız zaman haritamızdaki icon aşağıda görüldüğü gibi değişecektir.

Bu durumda sadece icon değiştirme özelliğini kullanarak yaptığımız google maps api haritamızın son güncel kodu 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 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' } );
	}
	
	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>

<html>

<head>

<style>

#map {

height: 400px;

width: 100%;

}

</style>

</head>

<body>

<div>

<option value="satellite">SATELLITE</option>

<option value="hybrid">HYBRID</option>

<option value="terrain">TERRAIN</option>

</select>

</div>

<div>

</div>

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 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' } );

}

function changeMapType() {

map.setMapTypeId(document.getElementById("mapViewType").value);

}

var zoomRange = document.getElementById("zoomRange");

zoomRange.oninput = function() {

map.setZoom(parseInt(this.value));

}

</script>

</body>

</footer>

</html>

Burada marker parametresine isteğe bağlı diğer iki özellikte eklenebilir.

JavaScript ile Google Maps Api Kullanarak Sayfadaki Haritaya İşaret (Marker) Ekleme İşlemi

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et