Kuinka lisätä Google-kartta Web-sivulle

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 yhdysvaltalaisille osoitteille, 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 asiakirjan HEAD-tiedosto.

Vaihda korostettu osa kahteen vaiheeseen kirjoitettuun leveys- ja pituusasteeseen.

Toiseksi, Lisää kartta-elementti sivullesi

Kun olet lisännyt kaikki asiakirjan HEAD-kohtaan lisätyt komentosarjan elementit, sinun on sijoitettava kartta sivulle. Teet tämän lisäämällä DIV-elementin id = "map-canvas" attribuuttiin. 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 BODY-määritteellä:

onload = "initialize ()" >

Muita asioita, jotka tarkistavat, onko kartta latautumassa:

• Etsi kirjoitusvirheitä JavaScript-ohjelmassa, mukaan lukien tapaus. JavaScript on erottelukykyinen.
• Varmista, että olet määrittänyt zoomaus- ja keskitysasetukset.
• Varmista, että DIV-elementti on sivulla oikealla tunnuksella.
• Varmista, että DIV-elementtisi 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ä?

Jos haluat lisätä tavallisen Google Mapsin punaisen merkinnän, lisää seuraavat skriptit alla var map = ... riville:

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 ( toiset koordinaatit );
   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: " Merkin otsikko "});
5. Lisää sitten toinen

   jossa haluat toisen kartan. Ja muista antaa sille id = "map_canvas_2" tunnus.

6. Kun sivusi ladataan, kaksi karttaa näytetään

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