01 iš 05
Gaukite savo svetainės "Google" žemėlapių API raktą
Geriausias būdas pridėti "Google" žemėlapį į jūsų svetainę yra "Google Maps API" naudojimas. "Google" rekomenduoja gauti API raktą, kad galėtumėte naudoti žemėlapius.
Jums nereikia gauti API raktą, kad galėtumėte naudoti "Google Maps API v3", tačiau tai labai naudinga, nes galite stebėti savo naudojimą ir mokėti už papildomą prieigą. "Google" žemėlapių API v3 yra 1 užklausos kiekvienam vartotojui kvota, kurią maksimaliai galima gauti 25 000 užklausų per dieną. Jei jūsų puslapiai viršija tas ribas, jums reikės įgalinti atsiskaitymą, kad gautumėte daugiau.
Kaip gauti "Google" žemėlapių API raktą
- Prisijunkite prie "Google" naudodami "Google" paskyrą.
- Eikite į "Developers Console"
- Peržiūrėkite sąrašą ir raskite "Google Maps API v3", tada spustelėkite mygtuką "IŠJUNGTA", kad jį įjungtumėte.
- Perskaitykite ir sutinkate su sąlygomis.
- Eikite į API konsolę ir kairiajame meniu pasirinkite "API prieiga"
- Skiltyje "Paprasta API prieiga" spustelėkite mygtuką "Sukurti naują serverio raktą ...".
- Įveskite savo interneto serverio IP adresą. Tai yra IP, kuriame bus pateikti jūsų "Maps" užklausos. Jei nežinote savo IP adreso, galite ieškoti jo.
- Nukopijuokite tekstą eilutėje "API raktas:" (be šio pavadinimo). Tai jūsų žemėlapių API raktas.
02 iš 05
Konvertuokite savo adresą į koordinates
Kad galėtumėte naudoti "Google" žemėlapius savo tinklalapiuose, turite nurodyti platumą ir ilgumą. Galite juos gauti iš GPS arba galite papasakoti jums tokį internetinį įrankį kaip "Geocoder.us".
- Eikite į "Geocoder.us" ir įveskite savo adresą paieškos laukelyje.
- Nukopijuokite pirmąjį platumos numerį (be priekinės raidės) ir įklijuokite jį į teksto failą. Jums nereikia laipsnio (º) indikatoriaus.
- Nukopijuokite pirmąjį ilgumą (dar kartą be priekinės raidės) ir įklijuokite jį į savo tekstinį failą.
Jūsų platuma ir ilguma atrodys šiek tiek:
40.756076
-73.990838
"Geocoder.us" veikia tik JAV adresus, jei norite gauti koordinates kitoje šalyje, turėtumėte ieškoti panašaus įrankio savo regione.
03 iš 05
Žemėlapio pridėjimas jūsų tinklalapyje
Pirma, pridėkite žemėlapio scenarijų į
jūsų dokumento
Atidarykite savo tinklalapį ir pridėkite šį dokumentą prie HEAD.
Pakeiskite paryškintą dalį į platumos ir ilgumos numerius, kuriuos įrašėte antroje žingsnyje.
Antra, pridėkite žemėlapio elementą į savo puslapį
Kai visi scenarijaus elementai yra pridėtos prie jūsų dokumento HEAD, turite nustatyti savo žemėlapio vietą puslapyje. Tai atliekate pridedant DIV elementą su atributu id = "map-canvas". Aš rekomenduoju jums taip pat stiliaus šio div su pločio ir aukščio, kuris tinka jūsų puslapyje:
Galiausiai įkėlimas ir bandymas
Paskutinis dalykas, kurį reikia padaryti, yra įkelti savo puslapį ir patikrinti, ar žemėlapyje rodomas jūsų žemėlapis. Čia yra "Google" žemėlapio pavyzdys puslapyje. Atkreipkite dėmesį, kad, atsižvelgiant į būdą, kaip veikia system.info "CMS", turėsite spustelėti nuorodą, kad žemėlapyje būtų rodomas. Tai nebus jūsų puslapyje.
Jei jūsų žemėlapis nerodomas, pabandykite inicijuoti jį atributu BODY:
onload = "initialize ()" >
Kiti dalykai, kuriuos reikia patikrinti, ar jūsų žemėlapis nėra įkeltas, yra šie:
- Ieškokite klaidų jūsų "JavaScript", įskaitant atvejį. "JavaScript" yra registruotas.
- Įsitikinkite, kad pasirinkote mastelio ir centro parinktis.
- Įsitikinkite, kad jūsų DIV elementas yra puslapyje, kuriame yra teisingas ID.
- Įsitikinkite, kad jūsų DIV elementas yra aukštis.
04 iš 05
Pridėkite žymeklį prie savo žemėlapio
Bet koks geras yra jūsų vietovės žemėlapis, jei nėra ženklo, kuriame žmonės sako, kur jie turėtų eiti?
Jei norite pridėti standartinį "Google" žemėlapių raudoną žymeklį, pridėkite toliau esantį scenarijų žemiau var map = ... eilutė:
var myLatlng = naujas google.maps.LatLng ( platuma, ilguma );
var marker = naujas google.maps.Marker ({
pozicija: myLatlng,
žemėlapis: žemėlapis
pavadinimas: " Anksčiau the-hotels.com" būstinė "
});
Pažymėtą tekstą pakeiskite į platumą ir ilgumą bei pavadinimą, kurį norėtumėte parodyti, kai žmonės rodomi virš žymeklio.
Galite įtraukti į svetainę kiek įmanoma daugiau žymeklių, tiesiog pridėti naujus kintamuosius su naujais koordinatėmis ir pavadinimais, tačiau jei žemėlapis yra per mažas, kad būtų rodomi visi žymekliai, jie nebus rodomi, nebent skaitytojas išmoksta.
var latlng 2 = naujas google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = naujas google.maps.Marker ({
pozicija: latlng 2 ,
žemėlapis: žemėlapis
pavadinimas: " Apple Computer "
});
Čia yra "Google" žemėlapio su žymekliu pavyzdys. Atkreipkite dėmesį, kad dėl to, kaip "cheatgamers.lt" veikia, jums reikia spustelėti nuorodą, kad žemėlapyje būtų rodomas. Tai nebus jūsų puslapyje.
05 iš 05
Įtraukite antrą (ar daugiau) žemėlapį į savo puslapį
Jei pažvelgėte į mano pavyzdį "Google" žemėlapių puslapyje, pastebėsite, kad puslapyje yra daugiau nei vienas žemėlapis. Tai labai lengva padaryti. Štai kaip.
- Gaukite visų žemėlapių, kuriuos norite rodyti, platumą ir ilgumą, kaip mes sužinojome šio vadovo 2 veiksme.
- Įtraukite pirmąjį žemėlapį, kaip sužinojome šio vadovo 3 žingsnyje. Jei norite, kad žemėlapyje būtų žymeklis, pridėkite žymeklį, kaip nurodyta 4 veiksme.
- Antrojo žemėlapio atveju jums reikės pridėti 3 naujas eilutes į scenarijų inicijuoti ():
var latlng2 = naujas google.maps.LatLng ( antroji koordinatė );
var myOptions2 = {padidinti: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = naujas google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Jei norite, kad ant naujojo žemėlapio būtų žymeklis, pridėkite antrą žymeklį ant antraeilių koordinačių ir antrojo žemėlapio:
var myMarker2 = naujas google.maps.Marker ({pozicija: latlng2 , map: map2 , pavadinimas: " Jūsų žymeklio antraštė "}); - Tada pridėti antrą
kur norite antrojo žemėlapio. Ir būtinai nurodykite id = "map_canvas_2" ID.
- Kai jūsų puslapis įkeltas, bus rodomi du žemėlapiai
Čia yra puslapio, kuriame yra du "Google" žemėlapiai, kodas: