Slik viser Google Maps API Keys

Slik viser Google Maps API Keys


Du har makt til å lage nyttige kartprogrammer som du kan se på datamaskiner og mobile enheter. Google Maps, som du kanskje har sett på nettet, er en nettbasert tjeneste som utviklere tilgang til gjennom Googles Application Programming Interface. Når du har en idé for din egen kart-programmet, kan du få tilgang til dette grensesnittet, og begynne å lære hvordan du kan utnytte kraften i Google Maps. Alt du trenger er en web-side og en API-nøkkel Google Maps.

Bruksanvisning

1 Besøk registreringssiden for Google Maps API på Code.google.com/apis/maps/signup.html og registrere deg for en API-nøkkel. Google Maps vil generere en ny API-nøkkel og vise det på websiden. Kopier denne nøkkelen.

2 Start en HTML-editor og lim inn følgende kode inn i en av dine HTML-dokumenter:

<Body onload = "loadMap ()">
<H1> Mine kart vises under </ h1>
<Div id = "tilpasset kart"> </ div>

Dette div tag holder kartet du genererer. Dens id verdien er "tilpasset kart." Den "onload" funksjonskall en Javascript-funksjon som laster kartet ditt når nettsiden lastes.

3 Legg til følgende kode i dokumentet hode seksjon:

<Style type = "text / css">

tilpasset kart {height: 400px; width: 400px; }

</ Style>

Dette CSS velgeren setter attributter for div. De gjeldende verdier gjør div 400 piksler høyt og 400 piksler bredt. Endre disse verdiene for å endre kart dimensjoner.

4 Lim inn følgende skriptmerket inn i dokumentet hode seksjon:

<Script type = "text / javascript"
src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&amp;sensor=true&quot;>
</ Script>

Bytt MY_API_KEY med API-nøkkel.

5 Lim inn følgende Javascript-kode i dokumentet manus seksjon:

funksjon loadMap () {

Var latitudeLongitude = ny google.maps.LatLng (-34,397, 150,644);

Var mapOptions = {
zoom: 3,
senter: latitudeLongitude,
MapTypeId: google.maps.MapTypeId.ROADMAP
};

Var kartet = ny google.maps.Map (document.getElementById ( "tilpasset kart"),
mapOptions);

}

Den loadMap funksjon går når siden loads.The latitudeLongitude variabel holder breddegrad og lengdegrad for det stedet du ønsker å vises på kartet. Disse verdier er 37.970185 og 121.810913 i dette eksempel. Zoomverdien setter kartets zoomnivå, og senteret alternativet sentre kartet over posisjonen du satt i lattitudeLongitude, og zoom. Koden kaller Map-funksjonen i den endelige uttalelsen til å generere kartet. At funksjonen bruker dine div og mapOptions variabler som parametere.

6 Lagre dokumentet og åpne den i en nettleser for å vise kartet. Den vil vises på samme måte som det gjør i Google Maps. Klikk og dra kartet for å vise forskjellige steder, og dra glidebryterne for å zoome inn og ut.

Hint

  • En rask måte å finne en plassering breddegrad og lengdegrad er å besøke Google Maps og søk etter hvilket som helst sted. Når kartet vises, klikker du på "Link" knappen for å vise disse verdiene.
  • Verdien for MapTypeId er "veikart" i dette eksempelet. Andre mulige verdier er Satellite, Hybrid og Terreng. Hybrid visningen viser fotografier og veier med gatenavn. Sett verdien til terrenget for å vise en fysisk relieffkart som viser en plassering terrenget, slik som elver og fjell.
  • Høyere verdier for zoomverdien føre til at nettleseren til å zoome inn mer på posisjonen din. Eksperimenter med ulike verdier for å oppnå ønsket zoom-effekten.