Skip to main content
google maps api yer işaretleme

Google maps api yer işaretleme

Google maps api place,makers

Bu yazımda google maps apinin farklı özelliklerini kullanmayı ve isteklerimize göre değiştirmeyi ele alacağız. Google maps api ile yer işaretleme yapabilir (google maps marker), harita üzerine ikon koyabilir (google maps marler icon) ve harita ikonuna tıklandığında detaylı bilgilerini gösterebiliriz(google maps infowindow  .Şimdi  ,örneğin bir bayilik sistemi var, haritalar
kullanılması gerekiyor. Müşteri panelden haritada seçtiği yerleri işaretleyecek ve sitesinin bayilik kısmında gösterecek. İki gün önce gelen bir işte şöyle bir yapı yaptım:
google maps api yer işaretleme

Bu bir örnek idi. Sizden istenenler doğrultusunda farklı işler yapıcaksınız elbet.

 

Google Maps Api Key

Google bizden api anahtarı istiyor. https://developers.google.com/maps/documentation/javascript/ burada GET A KEY ile bir key alalım. Bu birazdan işimize yarayacak.

Google Maps Api V3 Yer İşaretleme

Sürüklenebilir bir nesne ile lat,lng değerlerini alalım. Bu aldığımız değerleri alıp işlemek size kalmış. Veritabanına kayıt ettirip daha sonra yukarıdaki resmini verdiğim sistemi yapabilirsiniz.

/*js dosyamızı çağıralım*/
<script src="https://maps.googleapis.com/maps/api/js?key=****KEY***;libraries=places"></script>;
<div id="map"></div>
<script>
$(function(){
var map;
 /* haritamızı gösterelim #map divinin içinde */
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: -34.397, lng: 150.644}, /* haritamızın başlangıç koordinatları*/
 zoom: 8 /* isteğe bağlı zoom*/
 });

/* Google maps yer işaretleme için Google.maps.marker kullanıyoruz*/
 var marker = new google.maps.Marker({
     position:{
     /*işaretlenecek enlem boylam koordinatlar*/
     lat:-34.397, 
     lng:150.644
 },
 map:map, /* haritamızı gösteriyoruz*/
 draggable:true /* harita üzerinde sürüklenebilir olmasını istersek true yapalım */
 });

/*
* Eğer sürüklenen marker nesnemizin koordinatlarını almak isiyorsak eventler ile bunu yakalamamız gerekli.
* Sonra aldığımız değerleri nasıl kullanmak isteğiniz size kalmış. ister al veritabanına kayıt et. ister farklı şeyler yap.
* Burada consola yazdırdım. öğeyi denetle ile consoldan markerin haretkerleri değiştikce console logların değiştiğini görebilirsiniz.
*/
 google.maps.event.addListener(marker,'dragend',function(){
    console.log(marker.getPosition().lat());
    console.log(marker.getPosition().lng());
 });

});
</script>

Google maps api  infowindow ile açıklama alanı yapmak

OnPaste.20160327-025617


/*açıklamamızı maps.info ile yapıyoruz*/

var infowindow = new google.maps.InfoWindow({
content:"<div>içerik</div>" });

/*markerimize ekliyoruz*/

marker.addListener("click", function() {
infowindow.open(map, marker);

Google maps custom icon

Eğer farklı bir icon göstermek istiyorsanız makerinizde;


var marker = new google.maps.Marker({
/*markerin icon özelliğine url ata*/
icon:"url"

});

Google maps api autocomplete örneği

OnPaste.20160327-041829


/*id=textBox olan input a searchbox olmasını sağlıyoruz*/

var searcBox = new google.maps.places.SearchBox(document.getElementById('textBox'));

/*event ile değiştiğini algılıyoruz*/

google.maps.event.addListener(searcBox,'places_changed',function(){

var places = searcBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i,place;

for (var i = 0; place = places[i]; i++) {
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(9);

});

Bu yazımın sonuna geldik. bir buçuk saati geçti yazalı. umarım faydalı olmuştur. blog yazmak cidden kolay değilmiş. emek ve sabır istiyor.

Google maps api ile o kadar çok şey yapılabilir ki, ben sadece temel gerekli şeylerden bahsettim. Şuradan api ile yapılmış örneklere bakarak farklı şeyler deneyebilirsiniz.

Örnek dosyayı indir

  • Bilinmeye

    Abi çok faydalı çok güzel fakat ben php üzerine yazılımlar yapıyorum bu kısımlarda zayıfım bunun koordinatlarını php değişkene nasıl alırım?

Doğuş Pompa