Bir API Anahtarlı Web Sayfasına Google Haritası Nasıl Eklenir?

05/05

Siteniz için bir Google Haritalar API Anahtarı Alın

Web sitenize bir Google haritası eklemenin en iyi yolu, Google Haritalar API'sını kullanmaktır. Google, haritaları kullanmak için bir API anahtarı almanızı önerir.

Google Haritalar API'sı v3'ü kullanmak için bir API anahtarı almanıza gerek yoktur, ancak kullanımınızı izlemenize ve ek erişim için ödeme yapmanıza izin verdiği için çok yararlıdır. Google Haritalar API'sı v3, kullanıcı başına saniyede en çok 25.000 istekte bir kota sahiptir. Sayfalarınız bu limitleri aşarsa, daha fazla bilgi için faturalandırmayı etkinleştirmeniz gerekir.

Google Haritalar API Anahtarı nasıl edinilir?

1. Google hesabınızı kullanarak Google'a giriş yapın.
2. Geliştiriciler Konsolu'na gidin
3. Listede ilerleyin ve Google Maps API v3'ü bulun, ardından açmak için “OFF” düğmesini tıklayın.
4. Şartları okuyun ve kabul edin.
5. APIs konsoluna gidin ve soldaki menüden “API Erişimi” ni seçin.
6. “Basit API Erişimi” bölümünde, “Yeni Sunucu Oluştur oluştur …” düğmesine tıklayın.
7. Web sunucunuzun IP adresini girin. Bu, Haritalar isteklerinin geleceği IP adresidir. IP adresinizi bilmiyorsanız, yukarı bakabilirsiniz.
8. “API anahtarı:” satırındaki metni kopyalayın (söz konusu başlığı içermiyor). Bu, haritalarınız için API anahtarınızdır.

02/05

Adresinizi Koordinatörlere Dönüştürün

Google Haritalar’ı web sayfalarınızda kullanabilmek için, konum için enlem ve boylamınızın olması gerekir. Bunları bir GPS'den alabilir veya size söylemek için Geocoder.us gibi çevrimiçi bir araç kullanabilirsiniz.

1. Geocoder.us adresine gidin ve adresinizi arama kutusuna yazın.
2. Enlem için ilk sayıyı (önünde bir harf olmadan) kopyalayın ve bir metin dosyasına yapıştırın. Derece (º) göstergesine ihtiyacınız yoktur.
3. Boylam için ilk sayıyı kopyalayın (yine bir harf olmadan) ve metin dosyanıza yapıştırın.

Enlem ve boylamınız şöyle bir şeye benzeyecektir:

40.756076-73.990838

Geocoder.us yalnızca ABD adresleri için çalışır, eğer başka bir ülkede koordinatları almanız gerekiyorsa, bölgenizde benzer bir araç aramalısınız.

03/05

Web Sayfanıza Harita Ekleme

İlk olarak, Harita Komut Dosyasını

Belgenizin

Web sayfanızı açın ve aşağıdakileri BAŞ Belgenizin

Vurgulanan kısmı, ikinci adımda yazdığınız enlem ve boylam sayılarına değiştirin.

İkincisi, Harita Öğenizi Sayfanıza Ekleyin

Eklendiğinde tüm komut dosyası elemanlarına eklendiğinde BAŞ Belgenizde, haritanızı sayfaya yerleştirmeniz gerekir. Bunu ekleyerek yapabilirsiniz DIV eleman ile id = "harita-tuval" bağlıyor. Ayrıca, bu div'i sayfanıza sığacak genişlik ve yükseklikle stillemenizi öneririm:

Son olarak, Yükle ve Test Et

Yapmanız gereken en son şey sayfanızı yüklemek ve haritanızın görüntülendiğini test etmektir. İşte sayfadaki bir Google haritasının bir örneği. About.com CMS'nin çalışma şekli nedeniyle, haritanın görünmesi için bir bağlantıyı tıklamanız gerekeceğini unutmayın. Bu, sayfanızda geçerli olmayacaktır.

Haritanız görünmüyorsa, VÜCUT özellik:

Onload = ") (başlatma" >

Haritanızın yüklenmediğini kontrol etmek için başka şeyler şunları içerir:

• Durumunuz dahil, JavaScript'inizde yazım hataları arayın. JavaScript büyük / küçük harfe duyarlıdır.
• Sahip olduğunuzdan emin olun yakınlaştırma ve merkez seçenekler ayarlandı.
• Emin olun DIV Öğe doğru kimliğe sahip sayfadadır.
• Emin olun DIV elemanın bir yüksekliği vardır.

04/05

Haritanıza İşaretçi Ekleyin

Ama insanların nereye gitmeleri gerektiğini söyleyen bir işaret yoksa, konumunuzun haritası ne kadar iyi?

Standart bir Google Haritalar kırmızı işaretçi eklemek için aşağıdaki komut dosyasını aşağıya ekleyin. var harita = … hat:

var myLatlng = yeni google.maps.LatLng ( enlem boylam );var marker = yeni google.maps.Marker ({konum: myLatlng,harita: haritaBaşlık:" Eski Bir Guru ol '});

Vurgulanan metni enlem ve boylamınıza ve insanlar işaretçinin üzerine geldiğinde görünmesini istediğiniz başlığa değiştirin.

İstediğiniz kadar çok sayıda işaretçi ekleyebilirsiniz, yeni koordinatlara ve başlıklara yeni değişkenler eklemeniz yeterlidir, ancak harita tüm işaretleri görüntülemek için çok küçükse, okuyucu uzaklaştırmadıkça gösterilmez.

Var latlng 2 = yeni google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({pozisyon: latlng 2 ,harita: haritaBaşlık:" Apple bilgisayar '});

İşte bir işaretli Google haritasının bir örneği. About.com CMS'nin çalışma şeklinden dolayı, haritanın görünmesi için bir bağlantıyı tıklamanız gerektiğini unutmayın. Bu, sayfanızda geçerli olmayacaktır.

05/05

Sayfanıza İkinci (veya Daha Fazla) Harita Ekleme

Örnek Google harita sayfamı incelediyseniz, sayfada görüntülendiğim birden fazla harita olduğunu fark edersiniz. Bunu yapmak çok kolay. İşte nasıl.

1. Bu öğreticinin 2. adımında öğrendiğimiz gibi görüntülemek istediğiniz tüm haritaların enlem ve boylamını alın.
2. Bu öğreticinin 3. adımında öğrendiğimiz ilk haritayı yerleştirin. Haritanın bir işaretçisine sahip olmasını istiyorsanız, işaretçiyi 4. adımdaki gibi ekleyin.
3. İkinci harita için, initialize () komut dosyasına 3 yeni satır eklemeniz gerekecek:var latlng2 = yeni google.maps.LatLng ( ikinci koordinatlar );var myOptions2 = {zoom: 18, orta: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = yeni google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Yeni haritada da bir işaretçi istiyorsanız ikinci koordinatlara ve ikinci haritaya ikinci bir işaretçi ekleyin:var myMarker2 = yeni google.maps.Marker ({position: latlng2 , harita: map2 , Başlık:" İşaretçi Başlığınız ' });
5. Ardından ikinci haritayı istediğiniz yere ekleyin. Ve verdiğinizden emin olun id = "map_canvas_2" İD.
6. Sayfanız yüklendiğinde, iki harita gösterilecek

İşte bu sayfada iki Google haritasını içeren bir sayfanın kodu: