Web sayfanıza bir 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 belgenizin HEAD'sine ekleyin.

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

İkincisi, Harita Öğenizi Sayfanıza Ekleyin

Belgenizin HEAD'sine eklenen komut dosyası öğelerine sahip olduğunuzda, haritanızı sayfaya yerleştirmeniz gerekir. Bunu, id = "map-canvas" özelliğine sahip bir DIV öğesi ekleyerek yaparsınız. 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, bir BODY özelliği ile başlatmayı deneyin:

onload = "initialize ()" >

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.
• Yakınlaştırma ve merkez seçeneklerine sahip olduğunuzdan emin olun.
• DIV öğenizin sayfada doğru kimliğe sahip olduğundan emin olun.
• DIV elemanınızın bir yüksekliğe sahip olduğundan emin olun.

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, komut haritasına aşağıdakileri ekleyin: var map = ... line:

var myLatlng = yeni google.maps.LatLng ( enlem, boylam );
var marker = yeni google.maps.Marker ({
konum: myLatlng,
harita: harita
başlık: " Eski About.com Genel Merkezi "
});

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 = yeni google.maps.Marker ({
konum: latlng 2 ,
harita: harita
başlık: " Apple Computer "
});

İş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 , map: map2 , title: " Marker Başlığınız "});
5. Sonra ikinci ekle

   ikinci haritayı nereye istersen. Ve bir id = "map_canvas_2" kimliği verdiğinizden emin olun.

6. Sayfanız yüklendiğinde, iki harita gösterilecek

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