Google Maps Clustering ve OverlappingMarkerSpiderfier Özelliği

Daha önce google maps kullanımı hakkında bilgi vermiştim. Şimdi ise google maps kullanımını biraz daha profesyonel kullanmanızı sağlayacak bir kaç özellikten bahsedeceğim.

Clustering özelliği ile başlayalım. Clustering harita üzerinde belirlediğimiz markerlardan yakın olanları gruplayarak toplu halde göstermemizi sağlar. Zoom yaptığımızda detaya inerek markerları dağıtır. Aşağıdaki ekranda bir örnek gösterilmiştir.

google maps clustering

OverlappingMarkerSpiderfier is aynı koordinata denk gelen markerları görüntüleyebilmek için kullanılmaktadır. Markerları dairesel bir şekilde sıralayarak tümünü görmemize yardımcı olur. Örneği aşağıdaki gibidir.

OverlappingMarkerSpiderfier

Kod kısmına gelecek olursak ilk olarak aşağıdaki kütüphaneleri ve html nesnesini kodunuza eklemeniz gerekiyor. Aşağıdaki api key yazan yere google maps api keyinizi yazmayı unutmayınız!

<script src="jquery-1.11.3.min.js" type="text/javascript"></script><script src="http://maps.google.com/maps/api/js?sensor=false&amp;key=APIKEY" type="text/javascript"></script><script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script><script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>

<div id="harita" style="width: 100%; height: 400px" class="map"></div>

Javascript kısmında ise öncelikle koordinatları getiren veriyi hazırlıyoruz ve sayfa açıldığında haritayı oluşturan metodumuzu çağırıyoruz. Burada not olarak haritayı oluşturan veriler aralarına % işareti koyularak ayrılmıştır. Enlem ve boylam bilgisi arasında da / işareti vardır buna göre split yaparak koordinat bilgilerini alıyoruz. Siz veriyi istediğiniz gibi formatlayabilirsiniz.

<script>// <![CDATA[
var veri = "41.0179589666667/28.6734617%41.01799975/28.6734554166667%41.0179997/28.6734553333333%41.0179972333333/28.6734477833333%41.0179597166667/28.6734605333333%41.01795985/28.6734607%41.01795985/28.6734605333333%41.0165831166667/28.6731084833333%41.0179990833333/28.6734549166667%41.017999/28.6734548333333%41.0179988666667/28.6734549166667%41.0165848/28.6731084%41.0165829166667/28.6731085666667%41.0172411/28.6730280166667%41.0179592666667/28.67346045%41.0179590166667/28.6734603666667%41.0179995/28.6734550833333"; $(document).ready(function() { HaritaOlustur(0, 0, 'n', veri); });
// ]]></script>

Haritayı oluşturan function ise aşağıdaki gibidir.

function HaritaOlustur(startLat, startLng, startMapType, veri) {

        var gm = google.maps;
        var markers = [];
        var maxEnlem = 0;
        var maxBoylam = 0;
        var zoom = 0;

        maxEnlem = 41.0053215;
        maxBoylam = 29.0121795;
        zoom = 12;


        //kullanici lokasyonu
        var home = new google.maps.LatLng(maxEnlem, maxBoylam);

        var mapOptions = {
            zoom: zoom,
            center: home,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("harita"), mapOptions);


        var iw = new gm.InfoWindow();
        var oms = new OverlappingMarkerSpiderfier(map, {
            markersWontMove: true,
            markersWontHide: true
        });
        var usualColor = 'eebb22';
        var spiderfiedColor = 'ffee22';
        var iconWithColor = function(color) {
            return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
                color + '|000000|ffff00';
        }
        var shadow = new gm.MarkerImage(
            'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
            new gm.Size(37, 34), // size   - for sprite clipping
            new gm.Point(0, 0), // origin - ditto
            new gm.Point(10, 34) // anchor - where to meet map location
        );

        oms.addListener('click', function(marker) {
            iw.setContent(marker.desc);
            iw.open(map, marker);
        });
        oms.addListener('spiderfy', function(markers) {
            for (var i = 0; i < markers.length; i++) {
                markers[i].setIcon(iconWithColor(spiderfiedColor));
                markers[i].setShadow(null);
            }
            iw.close();
        });
        oms.addListener('unspiderfy', function(markers) {
            for (var i = 0; i < markers.length; i++) {
                markers[i].setIcon(iconWithColor(usualColor));
                markers[i].setShadow(shadow);
            }
        });

        var marker, i, durum, enlem, boylam, baslik, icon, content;


        var oms = new OverlappingMarkerSpiderfier(map, {
            keepSpiderfied: true
        });
        enlem = 41.036798;
        boylam = 28.977570;

        latlngset = new google.maps.LatLng(enlem, boylam);

        veri = veri.split('%');
        var satir = "";

        for (var i = 0; i < veri.length - 1; i++) {

            satir = veri[i].split('/');
            enlem = satir[0].toString();
            boylam = satir[1].toString();

            if (enlem != 0 && boylam != 0) {
                var marker = new google.maps.Marker({
                    map: map,
                    title: baslik,
                    position: new google.maps.LatLng(enlem, boylam),
                    icon: icon
                });

                oms.addMarker(marker);

                markers.push(marker);

                map.setCenter(marker.getPosition())

                var sira = i + 1;


                var content = "<b>Sira:</b> " + sira.toString();

                var infowindow = new google.maps.InfoWindow()

                google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
                    return function() {
                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                    };
                })(marker, content, infowindow));
            }
        }




        var markerCluster = new MarkerClusterer(map, markers);
        var minClusterZoom = 20;
        markerCluster.setMaxZoom(minClusterZoom);

        google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
            map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
            if (map.getZoom() &gt; minClusterZoom + 1) // If zoomed in past 15 (first level without clustering), zoom out to 15
                map.setZoom(minClusterZoom + 1);
        });

    }

Markerlar for döngüsü ile sırayla oluşturulmuştur. Üzerlerine tıklandığında açılacak popup içine yazılacak bilgiler content değişkenine aktarılmıştır. Popup içine html koduda yazabilirsiniz.

Demo haritayı görmek için tıklayınız  –  Kodu indirin