Kā pievienot Google karti savai tīmekļa lapai

01 no 05

Saņemiet sava vietnes Google Maps API atslēgu

Labākais veids, kā pievienot jūsu vietnei Google karti, ir izmantot Google Maps API. Un Google iesaka iegūt API atslēgu, lai izmantotu kartes.

Jums nav jāiegūst API atslēga, lai izmantotu Google Maps API v3, taču tā ir ļoti noderīga, jo tā ļauj jums pārraudzīt jūsu lietošanu un maksāt par papildu piekļuvi. Google Maps API v3 ir 1 pieprasījums pēc kārtas katram lietotājam, maksimāli 25 000 pieprasījumu dienā. Ja jūsu lapas pārsniedz šos ierobežojumus, jums būs jāiespējo norēķini, lai iegūtu vairāk.

Kā iegūt Google Maps API atslēgu

1. Pierakstieties Google, izmantojot savu Google kontu.
2. Dodieties uz Izstrādātāju konsoli
3. Ritiniet sarakstu un atrodiet Google Maps API v3, pēc tam noklikšķiniet uz pogas "IZSLĒGTS", lai to ieslēgtu.
4. Izlasiet un piekrītiet noteikumiem.
5. Pārejiet uz API konsole un izvēlieties "API Access" no kreisās puses izvēlnes
6. Sadaļā "Vienkāršā API piekļuve" noklikšķiniet uz pogas "Izveidot jaunu servera taustiņu ...".
7. Ievadiet sava tīmekļa servera IP adresi. Šī ir IP, no kuras tiks saņemti jūsu Kartes pieprasījumi. Ja jūs nezināt savu IP adresi, varat to uzmeklēt.
8. Kopējiet tekstu rindā "API atslēga:" (neiekļaujot šo nosaukumu). Tas ir jūsu API atslēga jūsu kartēm.

02 no 05

Pārveidojiet savu adresi uz koordinātēm

Lai izmantotu Google Maps savās tīmekļa lapās, jums ir jābūt atrašanās vietas garumam un platumam. Jūs varat tos iegūt no GPS vai arī varat izmantot tiešsaistes rīku, piemēram, Geocoder.us, lai pateiktu jums.

1. Iet uz Geocoder.us un ievadiet savu adresi meklēšanas lodziņā.
2. Kopējiet pirmo platuma numuru (bez vēstules priekšā) un ielīmējiet to teksta failā. Jums nav nepieciešams grāds (º).
3. Kopējiet pirmo garumu (vēlreiz bez vēstules priekšā) un ielīmējiet to teksta failā.

Jūsu platums un garums izskatīsies šādi:

40.756076
-73.990838

Geocoder.us darbojas tikai uz ASV adresēm, ja jums nepieciešams iegūt koordinātas citā valstī, jums vajadzētu meklēt līdzīgu rīku jūsu reģionā.

03 no 05

Karte pievienošana tīmeklim

Vispirms pievienojiet Map Script uz

no jūsu dokumenta

Atveriet savu tīmekļa lapu un pievienojiet sekojošo dokumenta galvu.

Iezīmētās daļas mainīšana uz platuma un garuma numuriem, ko esat ierakstījis otrajā solī.

Otrkārt, pievienojiet lapas elementu kartē

Kad visi dokumenta elementi ir pievienoti jūsu dokumenta galvai, jums ir jāuzstāda karte uz lapas. Jūs to darāt, pievienojot DIV elementu ar atribūtu id = "map-canvas". Es iesaku arī šo divu stilu ar platumu un augstumu, kas atbilst jūsu lapai:

Visbeidzot augšupielādēt un pārbaudīt

Visbeidzot, ir augšupielādēt lapu un pārbaudīt, vai karte parādās. Šeit ir piemērs Google kartē lapā. Ņemiet vērā, ka, ņemot vērā to, kā About.com CMS darbojas, jums būs jānoklikšķina uz saites, lai parādītu karti. Tas nebūs jūsu lapā.

Ja karte netiek parādīta, mēģiniet inicializēt to ar atribūtu BODY:

onload = "inicializēt ()" >

Citas lietas, lai pārbaudītu, vai karte nav ielādēta, ietver:

• Meklējiet JavaScript kļūdas, ieskaitot gadījumu. JavaScript ir reģistrjutīgs.
• Pārliecinieties, vai ir iestatīti tālummaiņas un centrāles opcijas.
• Pārliecinieties, vai lapā DIV ir pareizs ID.
• Pārliecinieties, vai jūsu DIV elementam ir augstums.

04 no 05

Pievienojiet savu karti marķieri

Bet kāda laba ir jūsu atrašanās vietas karte, ja nav marķiera, kas cilvēkiem dotu norādes, kur viņiem vajadzētu doties?

Lai pievienotu standarta Google kartes sarkano marķieri, pievienojiet zemāk redzamo skriptu zemāk var karte = ... line:

var myLatlng = jauns google.maps.LatLng ( platums, garums );
var marķieris = jauns google.maps.marks ({
amats: myLatlng,
karte: karte
Nosaukums: " Bijušais for-hotels.com galvenais birojs "
});

Izceliet izcelto tekstu savai platuma un garuma grādam un nosaukumam, kuru vēlaties redzēt, kad cilvēki kursē virs marķiera.

Jūs varat pievienot savai lapai tik daudz marķierus, vienkārši pievienojiet jaunus mainīgos ar jaunām koordinātēm un nosaukumiem, bet, ja karte ir pārāk maza, lai parādītu visus marķierus, tie netiks rādīti, ja vien lasītājs neizdosies.

var latlng 2 = jauns google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = jauns google.maps.Marker ({
pozīcija: latlng 2
karte: karte
nosaukums: " Apple Computer "
});

Šeit ir piemērs Google kartei ar marķieri. Ņemiet vērā, ka, ņemot vērā, kā About.com CMS darbojas, jums ir jānoklikšķina uz saites, lai parādītu karti. Tas nebūs jūsu lapā.

05 no 05

Pievienot otru (vai vairāku) karti savai lapai

Ja esat paskatījies uz manu piemēru Google kartes lapā, jūs pamanīsit, ka uz lapas ir redzama vairāk nekā viena karte. Tas ir ļoti viegli izdarāms. Lūk, kā.

1. Iegūstiet visu kartes, kuras vēlaties parādīt, platumu un garumu, kā mēs iemācījāmies šīs apmācības 2. solī.
2. Ievietojiet pirmo karti, kā mēs iemācījāmies šīs apmācības 3. solī. Ja vēlaties, lai kartē būtu marķieris, pievienojiet marķieri, kā norādīts 4. darbībā.
3. Otrajai kartei jums būs jāpievieno 3 jaunas rindiņas jūsu inicializēšanas () skriptam:
   var latlng2 = jauns google.maps.LatLng ( otrās koordinātas );
   var myOptions2 = {tālummaiņa: 18, centrs: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = jauns google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ja vēlaties arī marķieri jaunajā kartē, pievienojiet otru marķieri, kas norāda uz otrajām koordinātām un otro karti:
   var myMarker2 = jauns google.maps.Marker ({nostāja: latlng2 , karte: karte2 , nosaukums: " Jūsu marķiera virsraksts "});
5. Tad pievienojiet otro

   kur vēlaties otro karti. Un pārliecinieties, ka tam ir id = "map_canvas_2" ID.

6. Kad lapa tiek ielādēta, tiks parādītas divas kartes

Šeit ir lapas kods, kurā ir divas Google kartes: