Få en Google Maps API nøgle til dit websted
Den bedste måde at tilføje et Google-kort til dit websted er at bruge Google Maps API. Og Google anbefaler, at du får en API-nøgle for at bruge kortene.
Du er ikke forpligtet til at få en API-nøgle til at bruge Google Maps API v3, men det er meget nyttigt, da det lader dig overvåge din brug og betale for ekstra adgang. Google Maps API v3 har en kvote på 1 forespørgsel pr. Sekund pr. Bruger til maksimalt 25.000 anmodninger om dagen. Hvis dine sider overstiger disse grænser, skal du aktivere fakturering for at få mere.
Sådan får du en Google Maps API-nøgle
- Log ind på Google ved hjælp af din Google-konto.
- Gå til udviklerkonsollen
- Rul gennem listen og find Google Maps API v3, og klik derefter på knappen "OFF" for at tænde den.
- Læs og godkend betingelserne.
- Gå til API'ens konsol og vælg "API Access" i menuen til venstre
- Klik på knappen "Opret ny server nøgle …" i afsnittet "Enkel API-adgang".
- Indtast din webserver IP-adresse. Dette er den IP, hvor dine Maps-anmodninger kommer fra. Hvis du ikke kender din IP-adresse, kan du se det op.
- Kopier teksten på "API-nøgle:" -linjen (ikke den pågældende titel). Dette er din API-nøgle til dine kort.
Konverter din adresse til koordinater
For at kunne bruge Google Maps på dine websider skal du have bredde og længdegrad for placeringen. Du kan få disse fra en GPS, eller du kan bruge et online værktøj som Geocoder.us til at fortælle dig.
- Gå til Geocoder.us og indtast din adresse i søgefeltet.
- Kopier det første tal for bredden (uden et bogstav foran) og indsæt det i en tekstfil. Du behøver ikke graden (º) indikatoren.
- Kopier det første tal for længden (igen uden et bogstav foran) og indsæt det i din tekstfil.
Din breddegrad og længdegrad vil se sådan ud:
40.756076-73.990838
Geocoder.us fungerer kun for amerikanske adresser, hvis du har brug for at få koordinaterne i et andet land, skal du søge efter et lignende værktøj i din region.
03 af 05Tilføjelse af kortet til din webside
Først skal du tilføje kortskriptet til
af dit dokument
Åbn din webside og tilføj følgende til HOVED af dit dokument.
Skift den fremhævede del til længdegrad og længdegrad, som du skrev ned i trin to.
For det andet, tilføj kortelementet til din side
Når du har alle scriptelementerne tilføjet til HOVED af dit dokument skal du placere dit kort på siden. Du gør dette ved at tilføje en DIV element med id = "map-lærred" attribut. Jeg anbefaler dig også at style denne div med bredde og højde, der passer til din side:
Endelig Upload og test
Den sidste ting at gøre er at uploade din side og teste, at dit kort vises. Her er et eksempel på et Google-kort på siden. Bemærk, på grund af den måde, CMS fungerer på, skal du klikke på et link for at få kortet til at blive vist. Dette vil ikke være tilfældet på din side.
Hvis dit kort ikke vises, skal du prøve at initialisere det med en LEGEME attribut:
onload = "initialisere ()" >
Andre ting at kontrollere, om dit kort ikke indlæses, inkluderer:
- Kig efter typografier i dit JavaScript, herunder tilfælde. JavaScript er store og små bogstaver.
- Sørg for, at du har
zoomogcentrumindstillede valgmuligheder. - Sørg for at din
DIVelementet er på siden med det korrekte id. - Sørg for at din
DIVelementet har en højde
Tilføj en markør til dit kort
Men hvor god er et kort over din placering, hvis der ikke er nogen markør, der fortæller folk, hvor de skal hen?
For at tilføje en standard Google Maps rød markør tilføj følgende til dit script under var map = … linje:
var myLatlng = nye google.maps.LatLng ( bredde, længde );var markør = ny google.maps.Marker ({stilling: myLatlng,kort: kort,titel:" Tidligere hovedkontor '});
Skift den fremhævede tekst til din breddegrad og længdegrad og den titel, du vil se, når folk svæver over markøren.
Du kan tilføje så mange markører til siden som du vil, bare tilføj nye variabler med nye koordinater og titler, men hvis kortet er for lille til at vise alle markører, vises de ikke, medmindre læseren zoomer ud.
var latlng 2 = nye google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nye google.maps.Marker ({stilling: latlng 2 ,kort: kort,titel:" Apple Computer '});
Her er et eksempel på et Google-kort med en markør. Bemærk, på grund af den måde, CMS fungerer på, skal du klikke på et link for at få kortet til at blive vist. Dette vil ikke være tilfældet på din side.
05 af 05Tilføj et andet (eller mere) kort til din side
Hvis du har kigget på mit eksempel Google Maps side, vil du bemærke, at jeg har mere end et kort, der vises på siden. Dette er meget nemt at gøre. Sådan er det.
- Få bredden og længden af alle de kort, du vil vise, som vi har lært i trin 2 i denne vejledning.
- Indsæt det første kort, som vi lærte i trin 3 i denne vejledning. Hvis du vil have, at kortet skal have en markør, skal du tilføje markøren som i trin 4.
- For det andet kort skal du tilføje 3 nye linjer til dit initialiser () script:
var latlng2 = nye google.maps.LatLng ( anden koordinater );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = nye google.maps.Map (document.getElementById ("map_canvas_2"), mine valg2); - Hvis du også vil have en markør på det nye kort, skal du tilføje en anden markør, der peger på det andet koordinater og det andet kort:
var myMarker2 = nye google.maps.Marker ({position: latlng2 , kort: MAP2 , titel: " Din markør Titel ' }); - Tilføj derefter det andet sted, hvor du vil have det andet kort. Og sørg for at give det en
id = "map_canvas_2"ID. - Når din side indlæser, vises to kort
Her er koden på en side med to Google Maps på den:
