Hvordan bruke Google Maps API i en lokal Development Environment

Hvordan bruke Google Maps API i en lokal Development Environment


Google Maps kombinerer satellittbilder med gaten og highway informasjon i et interaktivt format. Med Google Maps Application Programming Interface, eller API, kan du innlemme kart til personlige eller kommersielle nettsteder uten kostnader med et ubegrenset antall sidevisninger. Google tilbyr tilpassede markører, grafikk og mange andre verktøy for å konfigurere og tilpasse dine kart for nesten alle bruksområder. Du kan kode og teste kartene i din lokale utviklingsmiljøet før du går live med dem på internett.

Bruksanvisning

1 Åpne din webside i en enkel tekst editor, for eksempel Notisblokk. Teksteditorer som gjør tekstformatering, for eksempel Word, legge til spesialtegn som ikke fungerer godt når du skriver websider. Før åpningen HTML-kode, legg en dokumenttypedeklarasjon for HTML 5. Erklæringen skal se ut <! DOCTYPE html>.

2 Skriv inn følgende Javascript-kode i mellom hodet tags på websiden. I parentes etter "LatLng" er bredde- og lengdegrader for midten av kartet. Endre de til det stedet som skal vises når kartet er lastet. De neste to parametrene er zoom, som kan variere fra 0 til 20, og karttypen. Google støtter fire karttyper: ROADMAP, satellitt, hybrid og terreng.

<Script type = "text / javascript" -funksjonen når siden lastes. Body-koden skal se ut <body onload = "displayMap ()">.

4 Skriv inn følgende div koder i HTML uansett hvor du ønsker å vise kartet. Endre verdiene for bredde og høyde som det passer deg.

<Div id = "google_map" style = "width: 550px; height: 400px"> </ div>

5 Lagre HTML-filen, og dobbeltklikk på den for å åpne den i nettleseren din. Kartet skal laste, viser det angitte stedet.

Hint

  • Versjon 3 av Google Maps bruker ikke en API-nøkkel, som er en kode du må få fra Google for versjon 2 når du bruker Google Maps online. Google har frarådet versjon 2, så nå er det ingen forskjell mellom går live og ved hjelp av Google Maps innenfor et lokalt utviklingsmiljø.