Google Maps çoklu yer işaretleme (Multiple Markers)

multiple-marker-gmaps

Google Maps Api  kullanarak bir noktayı işaretleme olayına marker diyoruz. Front-end Developer’ların çok işine yarayacağını düşündüğümüz bir özellikten bahsetmek istiyoruz.

Bazen harita üzerinde birden fazla noktaya işaret eklememiz gerekebiliyor (şubeler, bayiler, servisler vb)

Birden fazla yer işaretlemek için aşağıdaki kodlardan faydalanabilirsiniz.

HTML

<div id="map_wrapper">
<div class="mapping" id="map_canvas">
</div>
</div>

CSS

#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}

JS

jQuery(function ($) {
// API'yi Google'dan Asenkron Olarak Çağır
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Sayfada Haritayı Göster
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Birde Çok İşaretçi
var markers = [
['pcanalist', 36.854801, 30.756837],
['pcanalist,turkiye', 36.8519079, 30.7565151]
];
// Bilgi Pencerelerinin İçerikleri
var infoWindowContent = [
['<div class="info_content">' +
'<h3>pcanalist</h3>' +
'<p>Amacımız, kullanıcılara aradıklarını bulabilecekleri ve doğru haber alabilecekleri bir platform oluşturmak.</p>' + '</div>'],
['<div class="info_content">' +
'<h3>pcanalist</h3>' +
'<p>internet,teknoloji,haber</p>' +
'</div>']
];
// Haritada Birden Fazla İşaretçi Göster
var infoWindow = new google.maps.InfoWindow(), marker, i;
// İşaretçi Dizisini Döngüye Sok ve Harita Üzerine Yerleştir
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Her İşaretçinin Kendine Ait Bir Bilgi Penceresi Olmasına İzin ver
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Tüm İşaretçileri Otomatik Olarak Ekrana Sığdır
map.fitBounds(bounds);
}
// Kullanıcı Zoom Seviyesini Geçersiz Kılıp Uzaklaştırmayı Otomatik Ayarla (SADECE BİR KEZ ÇAĞIRILMALI!)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
//Karayel Tasarım Google Maps Fallback
}

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica