Skip to content

Näytä heille tie: Upota Google-kartta verkkosivustolle

20 de maaliskuu de 2021

Mitä tietää

  • Siirry Google Cloud Platform Consoleen 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 sijaintihakupommitusten takia, Google rajoittaa pääsyä Mapsinsa> Sovellusohjelmointirajapintaan pyytääkseen class = ”comp mntl-sc-block mntl-sc-block-html”> Rekisteröimään API-avain:

  1. Siirry Google Cloud Platform Consoleen ja luo uusi projekti tai valitse nykyinen, kun olet kirjautunut sisään Google-tililläsi.

  2. Klikkaus Jatkaa sallia sovellusliittymä ja kaikki siihen liittyvät palvelut.

  3. Sen Valtakirjat sivu, hanki API-avain. Määritä avaimelle tarvittaessa rajoitukset.

  4. Suojaa API-avain Googlen suosittelemien parhaiden käytäntöjen avulla.

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 verkkosivullesi

Lisää seuraava koodi Web-sivullesi HTML-asiakirjan KEHOSSA:

// Alusta ja lisää karttatoiminto initMap () {
// lipun var flag sijainti = {lat: XXX, lng: YYY};
// kartta, jonka keskellä on lippu var map = new google.maps.Map (document.getElementById (’map’), {zoom: 4, center: flag});
// Merkintä, sijoitettu lipulle var marker = new google.maps.Marker ({position: flag, map: map}); } src = ”https://maps.googleapis.com/maps/api/js?key=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 ja kartta ei 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 tuetaan Googlen kehittäjädokumentaatiossa.

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.