Google Maps Çoklu Yer Gösterme

Web siteme eklediğim google maps kodlarında 4. şubeyi aynı harita içeriğinde nasıl gösterebilirim. Google aramalarında bununla ilgili birşey bulamadım yardımlarınızı bekliyorum.

<html>
<body>
<style>

 #map_wrapper {
        height: 400px;
    }

    #map_canvas {
        width: 100%;
        height: 100%;

    }

</style>


  <div id="map_wrapper">
        <div class="mapping" id="map_canvas">
            &nbsp;
        </div>

    </div>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<script>
	
	 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

    }
	
	</script>
	
</body>
</html>

 

Kodu incelermisin aradığın bu galiba

 

Selim Merhaba, Verdiğin kodu deniyorum fakat google maps hata veriyor (kodun altına API KEY eklemiştim.) Hata nerde bulamadım. Verdiğin kodu deneyebilir misin?

Umarım bulmuşsundur bulamadınsa aşağıdaki gibi api eklemen gerekiyor

 

script.src = "http://maps.googleapis.com/maps/api/js?(-------API KEY-----------&&)sensor=false&callback=initialize";

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git