Haritalar, herhangi bir ticari web sitesinin temel bir özelliğidir. Tamamen internet tabanlı olsanız bile, müşteriler hala kim olduğunuzu ve nerede yaşadığınızı bilmek ister. Google Haritalar, artık kullanımı en kolay, görünüşte en doğru ve ücretsiz olduğu için birçok web sitesi için varsayılandır. Bu eğitimin sonunda, duyarlı bir Google Haritasının web sitenize nasıl ekleneceğini tam olarak bileceksiniz.
Varsayılan Google Haritalar her zaman yanıt vermez, bu nedenle farklı ekran boyutlarına ölçeklendirilmeyebilir. Bir WordPress eklentisi kullanmanıza veya kodu kullanarak kendinize katmanıza bağlı olarak, haritayı duyarlı hale getirmek için birkaç satır CSS eklemeniz gerekebilir.
Yanıt veren web tasarımı
Duyarlı, burada önemli bir terimdir. Web sitesine erişmek için kullandığınız cihaza bakılmaksızın aynı olmasını sağlamak için kullanıcı deneyimini ve cihazını dikkate alan web tasarımını açıklar. Örneğin, duyarlı bir web sitesi masaüstünde, tablette veya akıllı telefonda ziyaret edişinizde aynı deneyim kalitesini sağlamalıdır.
Bunu yapmak için, web sitesinin farklı çözünürlüklere, ekran boyutlarına uyum sağlaması ve dokunması gerekir.
Duyarlı bir Google Haritasını web sitesine yerleştirme
Google Haritalar’ı bir web sitesine yerleştirmek için bildiğim üç yol var. Bir WordPress teması kullanıyorsanız, bu özellik yerleşik olarak bulunabilir. Bir eklenti kullanabilir veya doğrudan Google’dan herhangi bir web sitesine kod gömebilirsiniz. İlk ve ikinci seçenekler WordPress kullanıcıları için harika, diğer CMS eklentileri de kullanıyor, bu yüzden oradasınız. Kod kullanılarak yapılan son seçenek, çoğu web sitesinde nasıl oluşturulduklarına bakılmaksızın çalışmalıdır.
Duyarlı bir Google Haritası yerleştirmek için bir WordPress teması kullanın
Bazı WordPress temaları, özellikle Google Haritalar için bir özelliğe sahip olacaktır. Haritalar, modern web siteleri için çok önemli olduğundan, bazı tema tasarımcıları onları doğrudan tasarımlarına uyguladı. Temanızın bir harita özelliği varsa, çalışabilmesi için bir Google Haritalar API'sine ihtiyacınız olacaktır. API'yı tema seçeneklerine eklerseniz, haritayı her ziyaretinizde oluşturmak için doğrudan Google ile konuşur.
- API işlemine başlamak için Google web sitesinde bu sayfayı ziyaret edin.
- Mavi renkli Başlarken düğmesini seçin.
- Yeni ekranın sol üstündeki üç satır menü simgesini seçin.
- API'ler ve Hizmetler ve ardından Kimlik Bilgileri'ni seçin.
- Kimlik Bilgisi Oluştur'u ve ardından API Anahtarı'nı seçin.
- Kısıtlama Anahtarı'nı seçin ve HTTP Yönlendiricileri'ni seçin.
- Kaydet'i seçin.
- API Anahtarını kopyalayın ve gerektiren tasarım seçenekleri sayfasına yapıştırın.
API Anahtarına sahip olduğunuzda, tema tasarımı araçlarını kullanarak Google Haritasını web sitenize uygulayabilirsiniz. Tema duyarlı olduğu sürece, harita da olmalıdır.
Duyarlı bir Google Haritası yerleştirmek için bir eklenti kullanın
WordPress eklentileri, Joomla Eklentileri, Drupal modülleri veya eklentileri kullanır ve diğer CMS'ler de benzer adlandırma kurallarını kullanır. Her iki durumda da eklentiler, özellikler eklemek için çekirdek CMS'nize cıvatalayabileceğiniz modüler elemanlara işaret eder. Yararlı bir özellik bir Google Haritası. Web sitenizin teması bir harita öğesi içermiyorsa ve kodu kendiniz yapmak istemiyorsanız, bir sonraki en iyi şey bir eklentidir.
- WordPress'te, Eklentiler'e ve Yeni Ekle'ye gidin.
- Google Haritalar’ı arayın ve görünüşünü beğeneceğiniz bir eklenti seçin.
- Eklentiler içinde etkinleştirin ve Ayarlar'a gidin.
- Oluşturduğunuz Google Maps API’yı yukarıda belirtilen yere ve Kaydet’e ekleyin.
- Haritanın görünmesini istediğiniz yere eklentiyi uygulayın.
Diğer CMS isimleri ve menü konumlarında biraz farklılık gösterir ancak prensip aynıdır. Hepsi değilse de, harita eklentileri Google Haritalar API’sının çalışmasını gerektirir.
Duyarlı bir Google Haritasını yerleştirmek için kod kullanın
WordPress veya başka bir CMS kullanmıyorsanız, yine de duyarlı bir Google Harita yerleştirebilirsiniz. Sadece bir modül yerine kod kullanmanız gerekir. Biraz daha fazla çalışma gerektiriyor, ancak aynı duyarlı haritaları da sunacak.
- Google Haritalar’ı ziyaret edin ve görüntülemek istediğiniz harita ekranı kaplayana kadar gezinin.
- Mavi Paylaş bağlantısını seçin ve kodu Gömme Haritasından kopyalayın.
- Kendi embed kodunuzu ve arasında aşağıdaki koda ekleyin.
- Kodu, web sayfanızın HTML'sinde haritayı görmek istediğiniz yere ekleyin.
- Değişikliklerinizi kaydedin.
Kod:
Bu benim kodum değil, çevrimiçi buldum ama web sitemde test ettim. Bir cazibe gibi çalışır ve bir CMS, HTML, Hugo veya diğer birçok web sitesi dilinden veya sayfa araçlarından birini kullanıp kullanmamanız gerekir.
