Kas jāzina
- Iet uz Google Cloud Platform Console un izveidojiet vai atlasiet projektu, pēc tam noklikšķiniet uz Turpināt. Uz Akreditācijas dati lapu, iegūstiet API atslēga.
- HTML dokumenta sadaļā BODY ievietojiet JavaScript kodu (parādīts zemāk).
- HTML dokumenta galvā norādiet kartes CSS ierobežojumus, tostarp lielumu, krāsas un lapas izvietojumu.
Šajā rakstā ir paskaidrots, kā savā tīmekļa lapā ievietot Google karti ar atrašanās vietas marķieri. Šis process ietver īpašas programmatūras atslēgas iegūšanu no Google un pēc tam attiecīgā JavaScript pievienošanu lapai.
Iegūstiet Google Maps API atslēgu
Lai pasargātu savus serverus no bombardēšanas ar pieprasījumiem pēc kartēm un atrašanās vietu meklēšanas, Google ierobežo piekļuvi savai Maps datu bāzei. Jums jāreģistrējas Google kā izstrādātājam, lai iegūtu unikālu atslēgu, lai lietotu lietojumprogrammu saskarni, lai pieprasītu datus no Maps serveriem. API atslēga ir bez maksas, ja vien jums nav nepieciešama lieljaudas piekļuve Google serveriem (piemēram, lai izveidotu tīmekļa lietotni).
Lai reģistrētu API atslēgu:
Iet uz Google Cloud Platform Console un pēc pieteikšanās ar savu Google kontu vai nu izveidojiet jaunu projektu, vai atlasiet esošu.
Klikšķis Turpināt lai iespējotu API un visus saistītos pakalpojumus.
Uz Akreditācijas dati lapu, iegūstiet API atslēga. Ja nepieciešams, iestatiet attiecīgus atslēgas ierobežojumus.
Nodrošiniet savu API atslēgu, izmantojot labākā pieredze ieteicams Google.
Ja uzskatāt, ka karte būs jāparāda biežāk, nekā to atļauj jūsu bezmaksas kvota, izveidojiet norēķinu kārtību ar Google. Maz ticams, ka lielākā daļa vietņu, it īpaši blogi vai nišas vietnes, patērēs lielu daļu kvotu.
Ievietojiet JavaScript savā tīmekļa lapā
Ievietojiet šādu kodu savā tīmekļa lapā HTML dokumenta sadaļā BODY:
// Inicializējiet un pievienojiet kartes funkciju initMap () {
// karoga var flag atrašanās vieta = {lat: XXX, lng: YYY};
// Karte, kuras centrā ir karodziņš var map = new google.maps. Karte (document.getElementById ('karte'), {tālummaiņa: 4, centrs: karogs});
// Marķieris, kas novietots karodziņā var marker = new google.maps. Marķieris ({position: flag, map: map}); } src = " https://maps.googleapis.com/maps/api/js? atslēga = YOUR_API_KEY & callback = initMap ">
Šajā kodā mainiet šo:
- Aizvietot karogu ar nosaukumu, kas norāda vietu, kuru piespraudāt. Saglabājiet to vienkārši un īsi (piemēram, mājas vai birojs vai parīze vai detroita). Jūs varat palaist šo kodu atstājot karogu tāds, kāds tas ir, bet nosaukuma maiņa atbalsta šī koda atkārtotu izmantošanu tajā pašā lapā, lai iegultu vairākas dažādas kartes.
- Aizvietot XXX un YYY ar kartes marķiera atrašanās vietas platumu un garumu decimāldaļās. Lai karte tiktu pareizi parādīta, jums ir jāaizstāj šīs vērtības. Vienkāršs veids, kā atrast platumu un garumu, ir atvērt Google Maps un ar peles labo pogu noklikšķiniet uz precīzās atrašanās vietas, kuru plānojat atzīmēt. Konteksta izvēlnē atlasiet Kas te ir? lai apskatītu platumu un garumu.
- Aizvietot JŪSU_API_KEY ar API atslēgu, kuru ieguvāt no Google. Nenovietojiet atstarpes starp vienādības zīmi un zīmi. Bez atslēgas vaicājums neizdosies, un karte netiks pareizi parādīta.
Optimāla prakse
HTML dokumenta galvā norādiet kartes CSS ierobežojumus, tostarp lielumu, krāsas un lapas izvietojumu.
Google kartes skriptā ir tādi atribūti kā tuvināt un centrā kas ir atvērtas galalietotāju modifikācijām. Šo modernāko paņēmienu atbalsta Google izstrādātāju dokumentācija.
Google Maps API ir vērtīgs īpašums. Google paraugprakses instrukcijās ir sniegti izcili padomi, kā nodrošināt atslēgu pret citu ļaunprātīgu izmantošanu. Pareiza drošība ir īpaši svarīga, ja esat iestatījis maksājumu sistēmu piekļuvei API, jo, ja tiek nozagti jūsu akreditācijas dati, jums var rasties liels rēķins. Jo īpaši piemērs, kuru mēs šeit parādījām dara iegult API atslēgu tieši kodā - mēs to esam izdarījuši, lai parādītu procedūru. Tomēr ražošanas vidē atslēgai ir labāk norādīt vides mainīgos, nevis tieši ievietot atslēgu.