Miten voit lisätä Google-kartan verkkosivulle API-avaimen avulla

01/05

Hanki Google Mapsin sovellusliittymän avain sivustoosi

Paras tapa lisätä Google-kartta sivustoosi on käyttää Google Maps API. Google suosittelee, että saat API-avaimen käyttääksesi karttoja.

Et tarvitse API-avaimen käyttämistä Google Maps API v3: n kanssa, mutta se on erittäin hyödyllinen, koska voit seurata käyttötunnustasi ja maksaa lisäsuoritusta. Google Maps API v3: n kiintiö on 1 pyyntö sekunnissa käyttäjää kohden enintään 25 000 pyyntöä päivässä. Jos sivusi ylittävät nämä rajat, sinun on otettava käyttöön laskutus, jotta saat enemmän.

Miten saada Google Mapsin sovellusliittymän avain

1. Kirjaudu Googleen Google-tilisi avulla.
2. Siirry Developers Console -ohjelmaan
3. Selaa luetteloa ja etsi Google Maps API v3 ja napsauta sitten "OFF" -painiketta sen käynnistämiseksi.
4. Lue ehdot ja hyväksy ne.
5. Siirry sovellusliittymäkonsoliin ja valitse vasemmanpuoleisesta valikosta API-käyttöoikeus
6. Napsauta "Yksinkertainen API-käyttöoikeus" -osiossa "Luo uusi palvelinavaus …" -painiketta.
7. Syötä verkkopalvelimen IP-osoite. Tämä on IP, jossa Mapsin pyynnöt tulevat. Jos et tiedä IP-osoitetta, voit etsiä sitä.
8. Kopioi teksti "API-avain:" -rivillä (ei kuitenkaan kyseistä otsikkoa). Tämä on API-avain karttasi.

02/05

Osoitteen muuntaminen koordinaatteihin

Jotta voit käyttää Google Mapsia Web-sivuillasi, sinulla on oltava sijainnin leveys- ja pituusaste. Voit saada nämä GPS: stä tai voit käyttää online-työkalua kuten Geocoder.us kertoa sinulle.

1. Siirry kohtaan Geocoder.us ja kirjoita osoite hakukenttään.
2. Kopioi leveysasteen ensimmäinen numero (ilman edessä olevaa kirjainta) ja liitä se tekstitiedostoon. Sinun ei tarvitse aste (º) -ilmaisinta.
3. Kopioi pituusosan ensimmäinen numero (uudelleen ilman edessä olevaa kirjainta) ja liitä se tekstitiedostoosi.

Leveys- ja pituusasteesi näyttää jotain tällaiselta:

40.756076-73.990838

Geocoder.us toimii vain Yhdysvaltojen osoitteita varten, jos haluat saada koordinaatit toisessa maassa, sinun on etsittävä vastaavaa työkalua omalla alueella.

03/05

Kartan lisääminen Web-sivulle

Ensinnäkin Lisää kartta-komentotiedosto

asiakirjasta

Avaa Web-sivu ja lisää seuraava PÄÄ asiakirjasta.

Vaihda korostettu osa kahteen vaiheeseen kirjoitettuun leveys- ja pituusasteeseen.

Toiseksi, Lisää kartta-elementti sivullesi

Kun kaikki komentosarjan elementit on lisätty PÄÄ sinun on sijoitettava kartta sivulle. Teet tämän lisäämällä a DIV elementti id = "kartta-kankaalle" ominaisuus. Suosittelen myös tyylitää tämän divin leveys ja korkeus, jotka sopivat sivusi:

Lopuksi Lataa ja testaa

Viimeinen asia on lähettää sivusi ja testata, että kartta näkyy. Tässä on esimerkki sivun Google-kartasta. Huomaa, koska About.com CMS toimii, sinun on napsautettava linkkiä saadaksesi kartan näkyviin. Näin ei tapahdu sivullasi.

Jos karttaa ei näy, yritä alustaa se a BODY määrite:

onload = "alustaa ()" >

Muita asioita, jotka tarkistavat, onko kartta latautumassa:

• Etsi kirjoitusvirheitä JavaScript-ohjelmassa, mukaan lukien tapaus. JavaScript on erottelukykyinen.
• Varmista, että sinulla on Zoomaus ja keskusta asetuksia.
• Varmista, että sinun DIV elementti on oikealla tunnuksella.
• Varmista, että sinun DIV elementillä on korkeus.

04/05

Lisää merkkinä karttaasi

Mutta mikä hyöty on sijaintisi kartta, jos ei ole merkkejä, jotka kertovat ihmisille, mihin heidän pitäisi mennä?

Lisää tavallinen Google Mapsin punainen merkkiaine lisää seuraavaa var map = … linja:

var myLatlng = uusi google.maps.LatLng ( Leveysaste Pituusaste );var marker = uusi google.maps.Marker ({asema: myLatlng,kartta: kartta,otsikko:" Entinen About.com Headquarters '});

Muuta korostettua tekstiä leveysasteeseen ja pituusasteeseen sekä otsikkoon, jonka haluat näkyvän, kun ihmiset vievät yli merkkiin.

Voit lisätä sivuille niin monta merkkiä kuin haluat, lisää vain uusiin muuttujiin uudet koordinaatit ja otsikot, mutta jos kartta on liian pieni näyttämään kaikki merkit, ne eivät näy, ellei lukija zoomaa.

var latlng 2 = uusi google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = uusi google.maps.Marker ({asema: latlng 2 ,kartta: kartta,otsikko:" Apple Computer '});

Tässä on esimerkki Google-kartasta, jossa on merkki. Huomaa, koska About.com CMS toimii, sinun on napsautettava linkkiä saadaksesi kartan näkyviin. Näin ei tapahdu sivullasi.

05/05

Lisää toinen (tai enemmän) karttaa sivulle

Jos olet tutkinut esimerkillistä Google Maps -sivullesi, huomaat, että sivulla on enemmän kuin yksi kartta. Tämä on erittäin helppoa. Näin on.

1. Hanki kaikkien karttojen leveys- ja pituusasteet näytettäväksi oppitunnin vaiheessa 2.
2. Aseta ensimmäinen kartta oppitunnin vaiheessa 3. Jos haluat, että kartassa on merkki, lisää merkki kuten vaiheessa 4.
3. Toiselle kartalle on lisättävä kolme uutta riviä initialize () -komentosi:var latlng2 = uusi google.maps.LatLng ( toinen koordinaatti );var myOptions2 = {zoom: 18, keskusta: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = uusi google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Jos haluat merkinnän myös uudella kartalla, lisää toinen merkintä osoittamaan toisella koordinaatilla ja toisella kartalla:var myMarker2 = uusi google.maps.Marker ({position: latlng2 , kartta: MAP2 , otsikko: " Sinun merkkijonoosi ' });
5. Lisää sitten toinen paikka, jossa haluat toisen kartan. Ja muista antaa se id = "map_canvas_2" ID.
6. Kun sivusi ladataan, kaksi karttaa näytetään

Tässä on sivun koodi, jossa on kaksi Google-karttaa: