Bilinmesi gereken
- şuraya git Google Bulut Platformu Konsolu ve bir proje oluşturun veya seçin, ardından Devam et. Üzerinde kimlik bilgileri sayfa, bir API anahtarı.
- JavaScript kodunu (aşağıda gösterilmiştir) HTML belgesinin BODY bölümüne ekleyin.
- HTML belgesinin başlığında, boyutlandırma, renkler ve sayfa yerleşimi dahil olmak üzere harita için CSS kısıtlamalarını belirtin.
Bu makale, web sayfanıza konum işaretçisi olan bir Google haritasının nasıl ekleneceğini açıklamaktadır. Bu işlem, Google'dan özel bir yazılım anahtarı almayı ve ardından ilgili JavaScript'i sayfaya eklemeyi içerir.
Bir Google Haritalar API Anahtarı Alın
Google, sunucularını harita istekleri ve konum aramaları tarafından bombardımana tutulmaktan korumak için Haritalar veritabanına erişimi kısıtlar. Haritalar sunucularından veri istemek üzere Uygulama Programlama Arayüzünü kullanmak üzere benzersiz bir anahtar elde etmek için Google'a geliştirici olarak kaydolmanız gerekir. API anahtarı, Google sunucularına yoğun erişime ihtiyacınız olmadığı sürece (örneğin, bir web uygulaması geliştirmek için) ücretsizdir.
API anahtarınızı kaydetmek için:
şuraya git Google Bulut Platformu Konsolu ve Google hesabınızla giriş yaptıktan sonra yeni bir proje oluşturun veya mevcut bir projeyi seçin.
Tıklayın Devam et API'yi ve ilgili hizmetleri etkinleştirmek için.
Üzerinde kimlik bilgileri sayfa, bir API anahtarı. Gerektiğinde, anahtar üzerinde ilgili kısıtlamaları ayarlayın.
API anahtarınızı kullanarak güvenli hale getirin en iyi uygulamalar Google tarafından önerilir.
Haritanın ücretsiz kotanızın izin verdiğinden daha sık görüntülenmesi gerektiğine inanıyorsanız, Google ile bir fatura düzenlemesi ayarlayın. Çoğu web sitesi, özellikle düşük trafikli bloglar veya niş siteler, kota tahsisinin çoğunu tüketme olasılığı düşüktür.
JavaScript'i Web Sayfanıza Ekleyin
Aşağıdaki kodu, HTML belgesinin BODY bölümünde Web sayfanıza ekleyin:
// Harita fonksiyonunu başlat ve ekle initMap() {
// bayrağın konumu var flag = {lat: XXX, lng: YYY};
// flag var map = yeni google.maps merkezli harita. Map(document.getElementById('harita'), {zoom: 4, center: flag});
// işaretçi, işaretçi var işaretçi = yeni google.maps'te konumlandı. Marker({konum: bayrak, harita: harita}); } kaynak=" https://maps.googleapis.com/maps/api/js? anahtar=YOUR_API_KEY&callback=initMap">
Bu kodda aşağıdakileri değiştirin:
- Değiştir bayrak sabitlediğiniz konuma referans veren bir adla. Basit ve kısa tutun (gibi ev veya ofis veya Paris veya detroit). Bu kodu bırakarak çalıştırabilirsiniz bayrak olduğu gibi, ancak adın değiştirilmesi, birkaç farklı haritayı gömmek için bu kodun aynı sayfada yeniden kullanılmasını destekler.
- Değiştir XXX ve YYY harita işaretçisinin konumunun ondalık olarak enlem ve boylamıyla birlikte. Haritanın düzgün görüntülenmesi için bu değerleri değiştirmelisiniz. Enlem ve boylamı bulmanın kolay bir yolu, Google Haritalar'ı açmak ve işaretlemek istediğiniz tam konumu sağ tıklamaktır. Bağlam menüsünde, Burada ne var? enlem ve boylamı görüntülemek için
- Değiştir YOUR_API_KEY Google'dan aldığınız API anahtarı ile. Eşittir işareti ile ve işareti arasına boşluk koymayın. Anahtar olmadan sorgu başarısız olur ve harita düzgün görüntülenmez.
Optimal Uygulamalar
HTML belgenizin başlığında, boyutlandırma, renkler ve sayfa yerleşimi dahil olmak üzere harita için CSS kısıtlamalarını belirtin.
Google'ın harita komut dosyası aşağıdaki gibi nitelikler içerir: yakınlaştırma ve merkez son kullanıcı değişikliğine açıktır. Bu daha gelişmiş teknik, Google'ın geliştirici belgeleri aracılığıyla desteklenir.
Google Haritalar API'sı değerli bir varlıktır. Google'ın en iyi uygulama talimatları, anahtarın başkaları tarafından kötüye kullanılmasına karşı güvence altına almak için mükemmel tavsiyeler sunar. API erişimi için bir ödeme sistemi kurduysanız, kimlik bilgileriniz çalınırsa yüksek bir faturayla karşı karşıya kalabileceğiniz için uygun güvenlik özellikle önemlidir. Özellikle, burada gösterdiğimiz örnek yapar API anahtarını doğrudan kodun içine gömün; bunu prosedürü göstermek amacıyla yaptık. Ancak bir üretim ortamında, anahtarı doğrudan eklemek yerine anahtar için ortam değişkenlerini belirtmek daha iyidir.