Web sitenize Google Haritalar kodu nasıl eklenir?

Web sitenize Google Haritalar kodu nasıl eklenir?

Web sitenize kolay ve anlaşılır bir şekilde Google Haritalar kodu ekleyebilirsiniz.

Genellikle şirket web sitelerinin iletişim sayfalarında yer alan ve şirket adresini ziyaretçiye detaylı bir şekilde göstermeye yarayan haritayı sizde kolay bir şekilde web sitenize ekleyebilirsiniz. Bunun için hazırlanmış bir web sitesinden faydalanacağız. Google Haritalar üzerinden de bu işlemi yapabilirsiniz. Ancak bu yöntemde harita üzerine şirket bilgilerini, detayları ve tam yerinizi gösteren mesaj balonu içerinde gösterebilirsiniz. Google haritalarda ise paylaş diyerek sadece adresin bulunduğu yerin çevresi ile birlikte iframe kodu olarak alıp sitenize eklersiniz.

Google harita kodunu almak için öncelikle buraya tıklayıp siteye gidelim.

Google Haritalar’ı web sitenize yerleştirmek hazır kod hizmeti sayesinde artık çok kolay! Aşağıdaki aşamaları uygulayarak şirketinizin web sitesine lokasyonunuzu nasıl ekleyebileceğiniz konusunda gerekli bilgiyi alabilirsiniz:

Başlık kısmına şirketin veya ilgili adresin ismini girebilirsiniz.

İlgili adresi seçin. İhtiyacınıza en uygun düşen harita türünü seçin. Bu seçenekler uydu, hibrit harita veya arazi haritasıdır.

Yakınlaştırma 50 veya 100 m seçmek daha mantıklı olabilir.

Haritanın web sitenizde kaplayacağı yeri göz önüne alarak uygun en ve boyu belirleyin.

Bu işlemleri yaptıktan sonra “benim kod üretmek” butonuna tıklayın. Oluşan kodu “Tıklayın ve Ctrl+c” yazılı butona tıklayarak kodu kopyalayın. En son olarak, oluşturulan bu HTML kodunu web sitenizde haritayı göstereceğiniz alanın kaynak kodu içine yapıştırın. Google Haritası’nı web sitenizin farklı bölümlerine yerleştirebilirsiniz, örneğin bir makalenin, bilgi veya iletişim sayfasına veya widgetların üzerinde kullanabilirsiniz.

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:440px;width:700px;'><div id='gmap_canvas' style='height:440px;width:700px;'></div><div><small><a href="http://embedgooglemaps.com">embed google map</a></small></div><div><small><a href="http://googlemapsgenerator.com/">Google maps generator</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(41.0082376,28.97835889999999),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(41.0082376,28.97835889999999)});infowindow = new google.maps.InfoWindow({content:'<strong>ogznet.com</strong><br>İstanbul, Turkey<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

Sayfanıza yapıştıracağınız kod yukarıdaki gibi olacak. Burada sitenin bağlantılarını içeren div kodları arasındaki kodları silebilirsiniz.

Ancak bu kodları siteye eklemeniz herşey bitti anlamına gelmiyor. Google api kodu olmadan harita gösterimi yapmaz. Api kodunu sayfanıza eklemezseniz haritanın görüneceği yerde aşağıdaki gibi hata uyarısı görürsünüz.

Bunu aşmak için Google'dan api key kodu alıp sayfamıza ekleyeceğiz. Bunun için de buraya tıklayın.

Açılan pencerede "Get a Key" butonuna tıklayın.

Açılır menüden "Get a new project" seçip bir isim verin projenize.

Proje ismini yazdıktan sonra "Create and enable api" butonuna tıklayın.

Sonuçta yukarıdaki gibi api key hazır artık. Api keyinizi kopyalayın.

<script src="https://maps.googleapis.com/maps/api/js?key=api_key_kod_buraya" type="text/javascript"></script>

Api key kodunu yukarıdaki kodda yer alan "api_key_kod_buraya" yazısının yerine yapıştırın. Sonra JS kodunu kopyalayıp sitenizde haritanın yayınlanacağı sayfanın </body> kodundan hemen önce yapıştırın.

Artık sitenizde haritanız hazır.

 

 

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 1880 kez okundu.

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın al