Veb-sahifangizga Google Map qanday qo'shiladi

01dan 05gacha

Sayt uchun Google Xaritalar API kaliti oling

Veb-saytingizga Google xaritasini qo'shishning eng yaxshi usuli - Google Maps API-dan foydalanish. Va Google xaritalarni ishlatish uchun API kaliti olishingizni tavsiya qiladi.

Google Maps API v3-dan foydalanish uchun siz API kaliti olishingiz shart emas, lekin u sizning foydalanishingizni kuzatib boradi va qo'shimcha ruxsatni to'lash imkonini beradi. Google Xaritalar API v3-da har bir foydalanuvchi uchun soniyada 1 ta so'rov kvotasi kuniga maksimal 25 ming so'rovga ega. Agar sahifalaringiz ushbu chegaradan oshib ketgan bo'lsa, siz ko'proq ma'lumot olish uchun billingni yoqtirishingiz lozim.

Google Maps API kaliti qanday olinadi

1. Google hisobingizdan foydalanib, Google'ga kirish.
2. Developers Console-ga o'ting
3. Ro'yxatda harakat qiling va Google Xaritalar API v3-ni toping va uni yoqish uchun "OFF" tugmasini bosing.
4. Shartlarni o'qing va rozilik bildiring.
5. APIs konsoliga o'ting va chap menyudan "API ga kirish" ni tanlang
6. "Oddiy API ga kirish" bo'limida "Yangi server kalitini yaratish ..." tugmasini bosing.
7. Veb-serveringizning IP-manzilini kiriting. Bu sizning Xaritalar so'rovlaringiz keladigan IP-dir. Agar siz IP manzilingizni bilmasangiz, uni qidirib topishingiz mumkin.
8. Matnni "API kaliti:" satriga ko'chirish (bu sarlavhani o'z ichiga olmaydi). Bu sizning xaritalaringiz uchun API kaliti.

02 of 05

Manzilingizni koordinatalaringizga aylantiring

Veb-sahifalaringizda Google Xaritalarni ishlatish uchun sizga joylashish uchun kenglik va uzunlik kerak. Siz ularni GPS dan olishingiz yoki sizga aytish uchun Geocoder.us kabi onlayn vositalardan foydalanishingiz mumkin.

1. Geocoder.us sahifasiga o'ting va qidiruv maydoniga manzilingizni kiriting.
2. Kenglik uchun birinchi raqamni (oldingi harfsiz) nusxalash va matnli faylga o'tkazing. Sizga (°) darajadagi ko'rsatkich kerak emas.
3. Uzunlik uchun birinchi raqamni (oldingi harfsiz) nusxalash va matn faylingizga joylashtiring.

Sizning kenglik va uzunlik quyidagi kabi ko'rinadi:

40.756076
-73.990838

Agar boshqa davlatda koordinatalarni olish kerak bo'lsa, Geocoder.us faqat AQSh manzillari uchun ishlaydi, siz o'z mintaqangizda shunga o'xshash vositani qidirishingiz kerak.

03 dan 05 gacha

Veb-sahifangizga Xarita qo'shish

Birinchidan, Map skript qo'shing

Sizning hujjatingiz

Veb-sahifangizni oching va hujjatning bosh qismiga quyidagilarni qo'shing.

Ajratilgan qismni ikki qadamda yozgan kenglik va uzunlik raqamlariga o'zgartiring.

Ikkinchidan, Xarita elementingizni sahifangizga qo'shing

O'zingizning hujjatning boshlig'iga qo'shilgan barcha skript elementlari bo'lganingizdan keyin sizning xaritangizni sahifaga joylashtirishingiz kerak. Buni id = "map-canvas" xususiyati bilan DIV elementini qo'shib qilasiz. Men sizga ushbu divni sizning sahifangizga mos keladigan kenglik va balandlik bilan ham uslubni tavsiya etaman:

Nihoyat, Upload and Test

Eng so'nggi narsa - sahifani yuklash va xaritangiz ko'rsatilishini tekshirish. Bu erda sahifadagi Google xaritasining misoli. Eslatma: CMS-ning ishlashi sababli, xarita paydo bo'lishi uchun havolani bosish kerak bo'ladi. Bu sizning sahifangizda ko'rinmaydi.

Xaritangiz ko'rsatilmasa, uni BODY xususiyati bilan ishga tushirishga harakat qiling:

onload = "initialize ()" >

Xaritangiz yuklanmaganligini tekshirish uchun boshqa narsalar quyidagilarni o'z ichiga oladi:

• Sizning JavaScript-da, shu jumladan, harflar bilan tanishib chiqing. JavaScript-ni katta-kichikligi sezgir.
• Zum va markaz moslamalarini o'rnatishga ishonch hosil qiling.
• DIV elementingiz to'g'ri identifikatori bo'lgan sahifada ekanligiga ishonch hosil qiling.
• DIV elementingizning balandligiga ishonch hosil qiling.

04/05

Xaritangizga markerni qo'shing

Biroq, sizning joylashuvingizning xaritasi odamlarga qaerga borish kerakligini ko'rsatadigan hech qanday marker bo'lmasa, nima yaxshi?

Standart Google Maps qizil markerini qo'shish uchun var map = ... satrining ostidagi skriptingizga quyidagilarni qo'shing:

var myLatlng = yangi google.maps.LatLng ( kenglik, uzunlik );
mavjud marker = yangi google.maps.Marker ({
manzil: myLatlng,
xarita: xarita,
unvoni: " Eski "
});

Belgilangan matnni sizning kenglik va uzunlikga va odamlar marker ustida harakatlanayotganda paydo bo'lishni istagan nomni o'zgartiring.

Istaganicha sahifaga qancha markerni qo'shishingiz mumkin, faqat yangi koordinatalar va sarlavhalar bilan yangi o'zgaruvchilarni qo'shishingiz mumkin, lekin agar xarita hamma belgilarni ko'rsatish uchun juda kichik bo'lsa, ular o'quvchi hajmini kamaytirmaguncha ko'rsatilmaydi.

var latlng 2 = yangi google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = yangi google.maps.Marker ({
manzil:
xarita: xarita,
unvoni: " Apple Computer "
});

Marker bilan birga Google xaritasining misoli. Eslatma: CMS-ning ishlashi sababli, xarita ko'rinishini olish uchun havolani bosishingiz kerak. Bu sizning sahifangizda ko'rinmaydi.

05 05

Sahifangizga Ikkinchi (yoki Ko'proq) Xarita qo'shing

Agar mening misolimga qarang Google xaritalari sahifasida men sahifada bir nechta xarita ko'rsatganini ko'rasiz. Bu juda oson. Mana qanday qilib.

1. Ushbu qo'llanmaning 2-bosqichida o'rganganimizdek ko'rsatmoqchi bo'lgan barcha xaritalarning kengligi va uzunligini oling.
2. Ushbu qo'llanmaning 3-bosqichida o'rganganimiz dastlabki xaritani kiriting. Xaritada markerni ko'rishni istasangiz, markerni 4-qadamda qo'shing.
3. Ikkinchi xarita uchun startize () skriptiga 3 ta yangi satr qo'shish kerak bo'ladi:
   var latlng2 = yangi google.maps.LatLng ( ikkinchi koordinatalar );
   var myOptions2 = {zoom: 18, markaz: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = yangi google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Agar siz yangi xaritada markerni xohlasangiz, ikkinchi koordinatalar va ikkinchi xarita ko'rsatadigan ikkinchi belgini qo'shing:
   var myMarker2 = yangi google.maps.Marker ({manzil: latlng2 , xarita: map2 , sarlavha: " Markeringizning nomi "});
5. Keyin ikkinchi qo'shing

   Ikkinchi xarita kerakli joy. Uni id = "map_canvas_2" identifikatori bilan ta'minlashga ishonch hosil qiling.

6. Sahifangiz yuklaganida, ikkita xarita ko'rsatiladi

Bu erda ikki Google xaritasi mavjud sahifaning kodi: