Google Maps Üzerinde Birden Fazla Noktayı İşaretleme

Bu uygulamanın farkı, ekrana gelecek işaretçilerin noktalarına göre otomatik olarak uzaklaştırma ve sığdırma ayarlaması. Detayları yorum satırlarında görebilirsiniz.

HTML

    <div id="map_wrapper">

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

            &nbsp;

        </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 = [

            ['Karayel Tasarım, Antalya Web Tasarım', 36.854801, 30.756837],

            ['TerraCity, Antalya', 36.8519079, 30.7565151]

        ];

        // Bilgi Pencerelerinin İçerikleri

        var infoWindowContent = [

            ['<div class="info_content">' +

            '<h3>Karayel Tasarım</h3>' +

            '<p>Web Tasarım danışmanınız olarak işimiz sadece kodlamak değil, internetle alakalı diğer konularda da size yardımcı olmak. Uzmanlık alanımızda olan e-Ticaret ve diğer tüm paketlerimiz aracılığıyla müşterilere ulaşmanız konusunda yardımcı olmak ve iş ilişkilerinizi kuvvetlendirmek ise ana hedefimizdir.</p>' + '</div>'],

            ['<div class="info_content">' +

            '<h3>TerraCity</h3>' +

            '<p>Antalyanın en büyük alışveriş merkezi.</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

    }

Teknoloji için takipte kalın... Sevgiler.