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

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

    }