Ինչպես ավելացնել Google Քարտեզ ձեր վեբ էջում

01-ը 05-ից

Ստացեք Google Քարտեզ API- ի ստեղնը Ձեր կայքի համար

Ձեր կայքը Google քարտեզի ավելացման լավագույն տարբերակն է Google Քարտեզ API- ի օգտագործումը: Եվ Google- ը խորհուրդ է տալիս API- ի բանալին օգտագործել քարտեզները:

Ձեզանից պահանջվում է API- ի բանալին օգտագործել Google Maps API v3- ի համար, բայց դա շատ օգտակար է, քանի որ այն թույլ է տալիս վերահսկել ձեր օգտագործումը եւ վճարել լրացուցիչ մուտք: Google Քարտեզների API v3- ը մեկ բաժանորդի համար մեկ հարցման քվոտա ունի օրական մեկից ավելի 25,000 հարցումների համար: Եթե ​​ձեր էջերը գերազանցում են այդ սահմանաչափերը, ապա պետք է ավելացնեք բիլլինգ `ավելի շատ ստանալու համար:

Ինչպես ստանալ Google Քարտեզ API- ի բանալի

1. Մուտք գործեք Google- ին, օգտագործելով ձեր Google հաշիվը:
2. Գնալ Developers Console- ում
3. Ցանկով անցեք ցուցակին եւ գտեք Google Maps API v3, ապա սեղմեք «OFF» կոճակը, այն միացնելու համար:
4. Կարդացեք եւ համաձայնեք պայմաններին:
5. Գնացեք API- ների կոնսոլից եւ ընտրեք «API Access» ձախից
6. «Պարզ API մուտք» բաժնում սեղմեք «Ստեղծեք նոր սերվերի բանալի ...» կոճակը:
7. Մուտքագրեք ձեր վեբ սերվերի IP հասցեն: Սա IP- ն է, որտեղ ձեր քարտեզի հարցումները կներկայացվեն: Եթե ​​դուք չգիտեք ձեր IP- հասցեն, կարող եք փնտրել այն:
8. Տեքստը պատճենեք «API key:» գիծում (ներառյալ այդ անվանումը): Սա ձեր API- ի բանալին է ձեր քարտեզների համար:

02-ից 05-ը

Փոխարկել ձեր հասցեները կոորդինացիաներին

Google Քարտեզները ձեր վեբ էջերում օգտագործելու համար դուք պետք է ունենաք ընդարձակություն եւ երկայնություն տեղադրության համար: Դուք կարող եք դրանք ստանալ GPS- ից կամ կարող եք օգտագործել Geocoder.us- ի նման օնլայն գործիքը ձեզ ասելու համար:

1. Գնացեք Geocoder.us եւ մուտքագրեք ձեր հասցեում որոնման դաշտում:
2. Պատկերացրեք լայնության համար առաջին համարը (առանց նամակ առջեւում) եւ այն տեքստային ֆայլում տեղադրեք: Ձեզ անհրաժեշտ չէ աստիճան (º) ցուցանիշ:
3. Պատճեն առաջին համարը երկայնության համար (կրկին առանց նամակ առջեւում) եւ տեղադրեք այն ձեր տեքստային ֆայլում:

Ձեր լայնության եւ երկայնության նման բան կանդրադառնա.

40.756076
-73.990838

Geocoder.us- ը աշխատում է միայն ԱՄՆ հասցեների համար, եթե անհրաժեշտ է ստանալ մեկ այլ երկրում կոորդինատները, դուք պետք է որոնել ձեր տարածաշրջանում նման գործիք:

03-ից 05-ը

Քարտեզը ձեր վեբ էջին ավելացնելու համար

Նախ, Քարտեզի սցենարը ավելացրեք

Ձեր փաստաթղթի մասին

Բացեք ձեր վեբ էջը եւ ավելացրեք ձեր փաստաթղթի ղեկավարին:

Խմբագրված բաժինը փոխեք քայլում ընդգրկված լայնության եւ երկայնության թվերին:

Երկրորդ, քարտեզի տարրը ավելացրեք ձեր էջին

Երբ ձեր փաստաթղթի ղեկավարին ավելացրեք բոլոր սցենարները, դուք պետք է տեղադրել ձեր քարտեզը էջում: Դուք դա անում եք, ավելացնելով DIV տարր `ID =" map-canvas "հատկանիշով: Ես խորհուրդ եմ տալիս նաեւ այս բաժնի ոճը լայնությամբ եւ բարձրությամբ, որը տեղավորվում է ձեր էջում:

Վերջապես, վերբեռնեք եւ ստուգեք

Վերջին բանը պետք է վերբեռնեք ձեր էջը եւ փորձեք, որ ձեր քարտեզը ցուցադրվի: Ահա էջի Google քարտեզի օրինակ: Նշենք, որ CMS- ի աշխատանքի շնորհիվ դուք պետք է սեղմել հղումը, քարտեզի վրա հայտնվելը: Սա ձեր էջում չի լինի:

Եթե ​​ձեր քարտեզը չի ցուցադրվում, փորձեք այն նախապատրաստել BODY հատկանիշով.

onload = "initialize ()" >

Այլ բաներ, ստուգելու համար, թե արդյոք ձեր քարտեզը չի բեռնվում ներառում:

• Փնտրեք ձեր տառերը ձեր JavaScript- ում, ներառյալ գործը: JavaScript- ը զգայուն է:
• Համոզվեք, որ դուք ունեք zoom եւ կենտրոնի ընտրանքները:
• Համոզվեք, որ ձեր DIV տարրը գտնվում է ճիշտ ID- ի էջում:
• Համոզվեք, որ ձեր DIV տարրը ունի բարձրություն:

04-ից 05-ը

Մարկեր ավելացնել ձեր քարտեզի վրա

Բայց ինչ լավ է ձեր գտնվելու վայրի քարտեզը, եթե չկա մարկեր, ասելով մարդկանց, որտեղ նրանք պետք է գնան:

Ստանդարտ Google Քարտեզների կարմիր մարկեր ավելացնելու համար ներքեւում տեղադրեք ներքեւի սկրիպտը var map = ... line:

var myLatlng = նոր google.maps.LatLng ( լայնություն, երկայնություն );
var marker = նոր google.maps.Marker ({
պաշտոնը, myLatlng,
քարտեզ: քարտեզ,
title: " նախկին "
});

Խմբագրված տեքստը փոխեք ձեր լայնության եւ երկայնության եւ տիտղոսը, որը ցանկանում եք հայտնվել, երբ մարդիկ սահում են մակնիշի վրա:

Դուք կարող եք ավելացնել այնքան էջանիշեր էջին, որքան ցանկանում եք, պարզապես ավելացրեք նոր փոփոխականներ նոր կոորդինատներով եւ վերնագրերով, բայց եթե քարտեզը չափազանց փոքր է ցուցադրելու բոլոր նշանները, դրանք չեն ցուցադրվի, եթե ընթերցողը դուրս գա:

var latlng 2 = նոր google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = նոր google.maps.Marker ({
դիրքորոշումը. latlng 2 ,
քարտեզ: քարտեզ,
title: " Apple Computer "
});

Ահա մի ցուցիչ ունեցող Google- ի քարտեզի օրինակ: Նշենք, որ CMS- ի աշխատանքի շնորհիվ դուք պետք է սեղմել հղումը, քարտեզի վրա հայտնվելը: Սա ձեր էջում չի լինի:

05-ից 05-ը

Ավելացրեք Երկրորդ (կամ Ավելորդ) քարտեզ ձեր էջին

Եթե ​​ես նայեցի իմ օրինակին Google Քարտեզների էջը, նկատում ես, որ էջում ցուցադրված ավելի քան մեկ քարտեզ կա: Դա շատ հեշտ է անել: Ահա թե ինչպես:

1. Ստացեք բոլոր քարտեզների լայնությունը եւ երկայնությունը, որը ցանկանում եք ցուցադրել, քանի որ մենք սովորել ենք այս ձեռնարկի 2-րդ քայլում:
2. Տեղադրեք առաջին քարտեզը, երբ մենք սովորեցինք այս ձեռնարկի 3-րդ քայլին: Եթե ​​ցանկանում եք, որ քարտեզն ունենա մարկեր, լրացրեք նշիչը, ինչպես 4-րդ քայլում:
3. Երկրորդ քարտեզի համար պետք է ավելացնել 3 նոր տող ձեր initialize () սցենարով.
   var latlng2 = նոր google.maps.LatLng ( երկրորդ կոորդինատներ );
   var myOptions2 = {zoom: 18, կենտրոն: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = նոր google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Եթե ​​դուք ցանկանում եք նաեւ նոր քարտեզի վրա մարկերներ ավելացնել երկրորդ երկրորդ կետը, ցույց տալով երկրորդ կոորդինատները եւ երկրորդ քարտեզը:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , map: map2 , title: " Ձեր նշիչի անվանումը"});
5. Այնուհետեւ ավելացրեք երկրորդը

   որտեղ ցանկանում եք երկրորդ քարտեզը: Եվ համոզվեք, որ այն ID = "map_canvas_2" ID- ն է:

6. Երբ ձեր էջը բեռնվում է, երկու քարտեզ կցուցադրվի

Ահա երկու Google- ի քարտեզի վրա գտնվող էջի կոդը: