Хэрхэн Google газрын зургийг өөрийн веб хуудсанд хэрхэн нэмэх

01 - 05

Таны сайтын Google Газрын зургийн API түлхүүрийг олж аваарай

Google газрын зургийг вэбсайтдаа нэмэх хамгийн сайн арга бол Google Газрын зургийн API-г ашиглах явдал юм. Мөн газрын зургийг ашиглахын тулд API түлхүүрийг авахыг Google зөвлөж байна.

Та Google Maps API v3-г ашиглахын тулд API түлхүүрийг авах шаардлагагүй, гэхдээ энэ нь таны хэрэглээг хянаж, нэмэлт нэвтрэх боломжийг олгодог. Google Газрын зургийн API v3 нь нэг хэрэглэгчээс нэг хүсэлт бүрийн хувьд квот өгдөг бөгөөд өдөрт хамгийн ихдээ 25,000 хүсэлт гаргадаг. Хэрэв таны хуудас эдгээр хязгаараас давсан бол илүү ихийг авахын тулд төлбөр тооцоог идэвхжүүлэх шаардлагатай болно.

Google Газрын зургийн API түлхүүрийг хэрхэн авах вэ

1. Google акаунтаа ашиглан Google рүү нэвтрэх.
2. Хөгжүүлэгчийн Консолд очно уу
3. Жагсаалтаар гүйлгэн очоод Google Maps API v3-ийг олж, түүнийгээ унтрааж "OFF" дээр дарна уу.
4. Нөхцөлүүдийг уншиж, зөвшөөрч байна.
5. APIs консол руу очиж зүүн гарны цэснээс "API Access" -ыг сонгоно уу
6. "Simple API Access" хэсэг дээр "Create new Server key ..." товчин дээр дарна уу.
7. Таны вэб серверийн IP хаяг оруулна уу. Энэ бол таны газрын зураг хүсэлт гаргасан IP хаяг юм. Хэрвээ та өөрийн IP хаягийг мэдэхгүй бол түүнийг хайж болно.
8. "API түлхүүр:" мөрийг (энэ гарчгийг оруулаагүй). Энэ бол таны газрын зургийн API түлхүүр юм.

05 - 05

Координатдаа өөрийн хаягийг хөрвүүлэх

Таны веб хуудсандаа Google Газрын зургийг ашиглахын тулд байршлын хувьд өргөрөг, уртрагыг авах хэрэгтэй. Та эдгээрийг GPS-аас авах боломжтой эсвэл Geocoder.us гэх мэт онлайн хэрэгслийг ашиглаж болно.

1. Geocoder.us руу очиж, хайлтын нүдэнд өөрийн хаягаа оруулна уу.
2. Өргөрөгт зориулсан эхний дугаарыг хуулах (өмнө үсэггүй бол) текст файлд буулгана уу. Танд (гр) индикатор байх шаардлагагүй.
3. Уртрагны эхний дугаарыг хуулах (өмнө нь захидалгүйгээр) хуулж, текст файлдаа буулгана уу.

Таны өргөргийн болон уртраг байдал иймэрхүү харагдах болно:

40.756076
-73.990838

Geocoder.us нь зөвхөн АНУ-ын хаягуудад ажилладаг, хэрэв та өөр улс оронд координат авах шаардлагатай бол өөрийн бүс нутагт ижил төстэй хэрэгсэл хайх хэрэгтэй.

03 - 05

Газрын зургийг таны веб хуудсанд нэмнэ

Нэгдүгээрт, Газрын зургийн скриптийг

Таны Баримт бичиг

Вэб хуудсаа нээгээд дараах баримт бичгийг өөрийн HEAD дээр нэмнэ үү.

Тодруулсан хэсгийг өөртөө хоёр дахь шатанд бичсэн өргөргийн болон уртраг тоогоор солих.

Хоёрдугаарт, Таны Хуудасны Газрын зураг Элементийг нэм

Бүтээлийнхээ HEAD дээр бүх скрипт элементүүд орсон бол хуудсан дээрх газрын зургаа байршуулах хэрэгтэй. Та id = "map-canvas" шинж чанар бүхий DIV элементийг нэмж үүнийг хийдэг. Би та бүхэндээ энэ зургийг өөрийн хуудсан дээр тохируулан өргөн, өндрөөр нь хэвлэе гэж зөвлөж байна:

Эцэст нь, Upload ба Туршилт

Хамгийн сүүлд хийх зүйл бол таны хуудсыг байршуулж, газрын зураг харуулах болно. Энэ хуудсанд Google газрын зургийн жишээ байна. Анхаарах зүйл, About.com CMS ажиллана, та газрын зураг авахын тулд холбоос дээр дарах хэрэгтэй. Энэ нь таны хуудасны хуудас биш юм.

Хэрэв таны газрын зураг харагдахгүй бол BODY attribute-ээр эхлүүлээрэй.

onload = "initialize ()" >

Таны газрын зураг ачаалахгүй байгаа эсэхийг шалгана уу:

• Текстийг оруулаад өөрийн JavaScript-д бичсэн тэмдэглэгээг хайна уу. JavaScript бол тохиолдлын эмзэг юм.
• Томруулсан болон төвийн тохируулгуудыг тохируулаарай.
• Таны DIV элемент зөв ID бүхий хуудас дээр байгаа эсэхийг шалгаарай.
• Таны DIV элемент өндөр байгаа эсэхийг шалгаарай.

04 - 05

Таны Газрын зурагт тэмдэглэгээг нэмнэ үү

Хаана очиж тэмдэглэх ямар ч хүн байхгүй бол таны байршлын зураг ямар сайхан байна вэ?

Стандарт Google Газрын Зургийн улаан тэмдэглэгээг нэмэхийн тулд дараах мөрийг var map = ... мөрний доорх скрипт дээр нэмнэ:

var myLatlng = шинэ google.maps.LatLng ( уртраг, уртраг );
var marker = шинэ google.maps.Marker ({
байрлал: myLatlng,
газрын зураг: газрын зураг,
гарчиг: " About.com Headquarters "
});

Өргөмжлөл, уртраг, тодруулсан текстийг өөрчилнө. Хүмүүс тэмдгийн дээгүүр өнгөрөх үед гарч ирэх гарчигийг харуулах болно.

Та хүссэн хуудсандаа олон тооны тэмдэглэгээг нэмж болох бөгөөд шинэ хувьсагчдыг шинэ координатууд болон гарчигуудтай нэмэх боломжтой боловч хэрвээ бүх зураглалыг харуулах газрын зураг хэтэрхий бага байвал уншигч томрохоос нааш харуулахгүй.

var latlng 2 = шинэ google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = шинэ google.maps.Marker ({
албан тушаал: latlng 2 ,
газрын зураг: газрын зураг,
гарчиг: " Apple Computer "
});

Энд тэмдэглэгээ бүхий Google газрын зургийн жишээ энд байна. Анхаарах зүйл, About.com CMS-ыг ажиллуулахын тулд та газрын зураг авахын тулд холбоос дээр дарах хэрэгтэй. Энэ нь таны хуудасны хуудас биш юм.

05 - 05

Хоёр дахь (буюу түүнээс дээш) газрын зургийг өөрийн хуудасруу нэмнэ үү

Хэрэв та миний жишээ Google Map хуудсыг харсан бол хуудсан дээрх нэгээс дээш тооны газрын зурагтай байх болно. Энэ нь хийхэд маш хялбар юм. Энд яах вэ.

1. Энэ хичээлийг 2-р алхам дээр сурч мэдсэнээр таны хүссэн бүх газрын зургуудын байршил, уртрагийг аваарай.
2. Энэхүү гарын авлагын 3-р хэсэгт суралцсанаар эхний газрын зургийг оруулах. Хэрэв та газрын зургийг тэмдэгтэй болгохыг хүсвэл 4-р алхам шиг маркерийг нэм.
3. Хоёрдахь газрын зургийн хувьд та эхлээд (3) скриптэд 3 шинэ мөр нэмэх хэрэгтэй болно:
   var latlng2 = шинэ google.maps.LatLng ( хоёр дахь координат );
   var myOptions2 = {томруулалт: 18, төв: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = шинэ google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Хэрэв та шинэ газрын зураг дээр тэмдгийг хүсч байвал хоёр дахь координат болон хоёрдахь газрын зураг дээр хоёр дахь тэмдэглэгээг нэмж оруул:
   var myMarker2 = шинэ google.maps.Marker ({байршил: latlng2 , газрын зураг: map2 , гарчиг: " Таны Маркер Гарчиг "});
5. Дараа нь хоёрдогчийг нэмнэ

   хаана хоёр дахь газрын зургийг хүсч байна. Үүнийг id = "map_canvas_2" ID өгөх хэрэгтэй.

6. Таны хуудас ачаалах үед хоёр газрын зураг харагдана

Энд хоёр Google газрын зураг бүхий нэг хуудасны код байна: