Mitä tietää
- Mene Google Cloud Platform Console ja luo tai valitse projekti ja napsauta sitten Jatkaa. Sen Valtakirjat sivu, hanki API-avain.
- Lisää JavaScript-koodi (näkyy alla) HTML-dokumentin BODY-osioon.
- Määritä HTML-asiakirjan päähän kartan CSS-rajoitukset, mukaan lukien mitoitus, värit ja sivun sijoittelu.
Tässä artikkelissa kerrotaan, kuinka Google-kartta lisätään verkkosivulle sijaintimerkillä. Tämä prosessi sisältää erityisen ohjelmistoavaimen hankkimisen Googlelta ja sitten asiaankuuluvan JavaScriptin lisäämisen sivulle.
Hanki Google Maps -sovellusliittymäavain
Suojellakseen palvelimiaan karttapyyntöjen ja sijaintihaun aiheuttamilta pommituksilta Google rajoittaa pääsyä Maps-tietokantaansa. Sinun on rekisteröidyttävä Googleen kehittäjänä, jotta saat yksilöllisen avaimen, jolla voit hakea tietoja Maps-palvelimilta sovellusohjelmointirajapinnalla. API-avain on ilmainen, ellet tarvitse raskasta pääsyä Googlen palvelimille (esimerkiksi verkkosovelluksen kehittämiseksi).
API-avaimen rekisteröiminen:
Mene Google Cloud Platform Console ja kun olet kirjautunut sisään Google-tililläsi, joko luo uusi projekti tai valitse olemassa oleva projekti.
Klikkaus Jatkaa sallia sovellusliittymä ja kaikki siihen liittyvät palvelut.
Sen Valtakirjat sivu, hanki API-avain. Määritä tarvittaessa avaimen rajoitukset.
Suojaa API-avain käyttämällä parhaat käytännöt Google suositteli.
Jos uskot, että sinun on näytettävä karttaa useammin kuin ilmainen kiintiösi sallii, määritä laskutusjärjestely Googlen kanssa. Suurin osa verkkosivustoista, varsinkin vähän liikennettä käyttävät blogit tai kapealla olevat sivustot, eivät todennäköisesti kuluta suurta osaa kiintiöistä.
Lisää JavaScript Web-sivullesi
Lisää seuraava koodi Web-sivullesi HTML-asiakirjan KORI osaan:
// Alusta ja lisää karttatoiminto initMap () {
// lipun var flag sijainti = {lat: XXX, lng: YYY};
// Kartta, jonka keskellä on lippu var map = new google.maps. Kartta (document.getElementById ('kartta'), {zoomaus: 4, keskellä: lippu});
// Merkintä, joka on sijoitettu lipulle var marker = new google.maps. Marker ({sijainti: lippu, kartta: kartta}); } src = " https://maps.googleapis.com/maps/api/js? avain = YOUR_API_KEY & callback = initMap ">
Muuta tässä koodissa seuraavaa:
- Korvata lippu nimellä, joka viittaa kiinnittämääsi sijaintiin. Pidä se yksinkertaisena ja lyhyenä (kuten Koti tai toimisto tai Pariisi tai detroit). Voit suorittaa tämän koodin poistumalla lippu sellaisenaan, mutta nimen muuttaminen tukee tämän koodin uudelleenkäyttöä samalla sivulla useiden eri karttojen upottamiseksi.
- Korvata XXX ja YYY kartan merkinnän sijainnin leveys- ja pituusaste desimaaleina. Sinun on vaihdettava nämä arvot, jotta kartta näkyy oikein. Helppo tapa löytää leveys- ja pituusaste on avata Google Maps ja napsauttaa hiiren kakkospainikkeella tarkkaa sijaintia, jonka aiot merkitä. Valitse pikavalikosta Mitä täällä on? nähdäksesi leveys- ja pituusasteet.
- Korvata YOUR_API_KEY Googlelta saamallasi API-avaimella. Älä laita välilyöntejä yhtäläisyysmerkin ja ampersandin väliin. Ilman avainta kysely epäonnistuu eikä kartta näy oikein.
Optimaaliset käytännöt
Määritä HTML-dokumenttisi päähän kartan CSS-rajoitukset, mukaan lukien mitoitus, värit ja sivun sijoittelu.
Googlen karttakomentosarja sisältää ominaisuuksia, kuten Zoomaus ja keskusta jotka ovat avoimia loppukäyttäjille. Tätä kehittyneempää tekniikkaa tukee Googlen kehittäjädokumentaatio.
Google Maps -sovellusliittymä on arvokas omaisuus. Googlen parhaiden käytäntöjen ohjeet tarjoavat erinomaisia neuvoja avaimen turvaamiseksi muiden väärinkäytöltä. Oikea tietoturva on erityisen tärkeää, jos olet perustanut maksujärjestelmän API-pääsyä varten, koska saatat joutua odottamaan laskua, jos käyttäjätietosi varastetaan. Erityisesti tässä näytetty esimerkki tekee upota API-avain suoraan koodiin - olemme tehneet tämän menettelyn osoittamiseksi. Tuotantoympäristössä on kuitenkin parempi määrittää avaimen ympäristömuuttujat avaimen lisäämisen sijaan.