Konular

Google Maps Yerine OpenLayers Kullanmak

Google haritanızı bir OpenLayers Haritası ile değiştirme kılavuzu

This page can't load Google Maps correctly!

Bu sayfa Google Haritalar'ı doğru bir şekilde yükleyemiyor

11 Haziran 2018 tarihinden itibaren google maps API'yi kullanmak için bir kredi kartıyla faturalandırmayı etkinleştirmeniz ve geçerli bir API anahtarına sahip olmanız gerekir. Çoğu site ücretsiz kullanımı asla aşmayacaktır, bu nedenle bir kredi kartı kaydettirmek, özellikle kredi kartı bile olmayan hayır kurumları için biraz anlamsız görünmektedir.

Faturalandırmayı etkinleştirmezseniz, şöyle bir şey göreceksiniz -

Google Maps Yerine OpenLayers Kullanmak

Mevcut Google Haritası

Aşağıdaki kod, New York City'deki üç konumu çizer ve kullanıcı işaretçilerden birine tıkladığında daha fazla bilgi içeren bir açılır pencere görüntüler.

<script>
      function initialize() {

                var locations = [
                ["Statue Of Liberty", 40.6892534, -74.0446426, "the-statue-of-libety", "photo-r49243.jpg", 1],
                ["Central Park", 40.7828687, -73.9659076, "central-park", "photo-3122121.jpg", 2],
                ["Rockefeller Center", 40.7562179,-73.9848441, "rockerfeller-center","photo-233444.jpg", 3]
                ];

                var map = new google.maps.Map(document.getElementById('map-canvas'), {
                      zoom: 6,
                          scrollwheel: false,
                      center: new google.maps.LatLng(53.7633964,-4.8943857),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {  
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
              });

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent('<a style="color:black; font-weight:600" href="http://www.somedomain.com/' + locations[i][3] + '">' +
                        '<img src="' +  locations[i][4] + '" width="200" />' +
                        '<div style="width:220px; margin-top:3px">' + locations[i][0] + '</div></a>');
                  infowindow.open(map, marker);
                }
              })(marker, i));
            }
        }
     google.maps.event.addDomListener(window, 'load', initialize);
</script>
   

Yukarıdaki Kod Yerine Kullanılabilecek Open Layers Örneği

Aşağıdaki kod, eşdeğer haritayı yalnızca bu sefer Open Layers V3 kullanarak çizer.

  
<link rel="stylesheet" href="./ol_v5.2.0.css"" type="text/css">
<link rel="
stylesheet" href="./ol-popup.css"" type="text/css">

<script src="./ol_v5.2.0.js"></script>
<script src="./ol-popup.js"></script>


<script>
        var locations = [
        ["Statue Of Liberty", 40.6892534, -74.0446426, "the-statue-of-libety", "photo-r49243.jpg", 1],
        ["Central Park", 40.7828687, -73.9659076, "central-park", "photo-3122121.jpg", 2],
        ["Rockefeller Center", 40.7562179,-73.9848441, "rockerfeller-center","photo-233444.jpg", 3]
        ];

        // Array of Icon features
        var iconFeatures=[];
        for (var i = 0; i < locations.length; i++) {
          var iconFeature = new ol.Feature({
                type: 'click',
                desc: locations[i][0],
                url: locations[i][3],
                image: locations[i][4],
            geometry: new ol.geom.Point(ol.proj.transform([locations[i][2], locations[i][1]], 'EPSG:4326', 'EPSG:3857')),
          });

          iconFeatures.push(iconFeature);
        }

        var vectorSource = new ol.source.Vector({
                features: iconFeatures
        });

        // Custom image for marker
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
              anchor: [0.5, 0.5],
              anchorXUnits: 'fraction',
              anchorYUnits: 'fraction',
              src: './map-pin.png',
              scale: 0.15
                    })
        });
         
        var vectorLayer = new ol.layer.Vector({
          source: vectorSource,
          style: iconStyle,
          updateWhileAnimating: true,
          updateWhileInteracting: true,
        });

        // Create our initial map view
        var mapCenter = ol.proj.fromLonLat([ -74.0446426, 40.6892534 ]);
        var view = new ol.View({
          center: mapCenter,
          zoom: 10
        });

        // Now create our map
        var map = new ol.Map({
          target: 'map-canvas',
          view: view,
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM(),
            }),
            vectorLayer,
          ],
          loadTilesWhileAnimating: true,
        });

        var popup = new ol.Overlay.Popup();
        map.addOverlay(popup);

        // Add an event handler for when someone clicks on a marker
        map.on('singleclick', function(evt) {

            // Hide existing popup and reset it's offset
            popup.hide();
            popup.setOffset([0, 0]);

            // Attempt to find a feature in one of the visible vector layers
            var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
                return feature;
            });

            if (feature) {
                var coord = feature.getGeometry().getCoordinates();
                var props = feature.getProperties();
                var info = '<a style="color:black; font-weight:600; font-size:11px" href="http://www.somedomain.com/' + props.url + '">' +
                '<img width="200" src="' +  props.image + '"  />' +
                '<div style="width:220px; margin-top:3px">' + props.desc + '</div></a>';

                // Offset the popup so it points at the middle of the marker not the tip
                popup.setOffset([0, -22]);
                popup.show(coord, info);
            }
        });

        // Add an event handler for when someone hovers over a marker
        // This changes the cursor to a pointer
        map.on("pointermove", function (evt) {
            var hit = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
                return true;
            });
            if (hit) {
                this.getTargetElement().style.cursor = 'pointer';
            } else {
                this.getTargetElement().style.cursor = '';
            }
        });

</script>
   

Çizilen harita aşağıdaki gibi görünür -

Google Maps Yerine OpenLayers Kullanmak

Kaynak Kodunu İndir

 

Kaynak

Yorumunuzu Ekleyin

Google Map Kullanarak Harita Tasarlamak

Google bazı ürünlerini kısıtlı kullanım alanlarından sıyırıp yaratıcı ellere teslim ederek hem kendisine duyulan sempatiyi arttırıyor hem de biz kullanıcılara yeni kullanım alanları açabiliyor.

35,761 Okunma 10 Yorum 31/03/2008 05:44:04

Google Map Api 3.0

Google Maps API 3 resmi API artık. Versiyon 2 API artık resmi olarak önerilmilyor.V2 ile yaptığınız uygulamalarınızı V3 için güncellemeniz gerekli. V3 'ün en büyük özelliği mobil cihazlara göre düzenlenmiş olması ve API keyin artık gerekli olmayışı

25,991 Okunma 5 Yorum 14/07/2011 18:51:25 30/10/2012 04:04:12

Kurumsal Mail Hizmeti İçin Google Kullanmak

Bir host hizmetinden aldığınız mail adresini gmaile yönlendirerek nasıl kullanabileceğinizi anlatan bir makale...

22,069 Okunma Henüz yorum yapılmamış 12/04/2013 02:03:49 16/04/2013 02:10:39

Google Docs

Paylaş

17,510 Okunma Henüz yorum yapılmamış 21/02/2012 09:05:37

Youtube Videosunu Kullanmak

Bir youtube videosunun özellikleri

10,400 Okunma Henüz yorum yapılmamış 29/08/2014 00:52:17 08/12/2015 00:52:34

Google Adwords API Kullanımı

Google Reklamlarını yönetmek için Google Adwords API'yi kullanmalısınız.

7,395 Okunma Henüz yorum yapılmamış 25/07/2018 17:52:58 26/07/2018 17:52:55

Google Site İçi Arama Motoru

Bir web siteniz var ve ziyaretçilerinizin siteniz içerisinde arama yapmasını istiyorsanız google Custom Search Api kullanmalısınız.

7,201 Okunma Henüz yorum yapılmamış 29/06/2018 22:43:17 30/06/2018 01:48:54

Open Layers'a Giriş

Bir web sayfasına basit bir haritanın nasıl yerleştirileceğini öğrenin.

202 Okunma Henüz yorum yapılmamış 24/04/2021 00:17:32 25/04/2021 13:15:10

Yükleniyor...