Hoe om 'n Google-kaart by jou webbladsy te voeg

01 van 05

Kry 'n Google Maps API sleutel vir jou webwerf

Die beste manier om 'n Google-kaart by jou webwerf te voeg, is om Google Maps API te gebruik. En Google beveel aan dat jy 'n API-sleutel kry om die kaarte te gebruik.

Jy hoef nie 'n API-sleutel te kry om Google Maps API v3 te gebruik nie, maar dit is baie handig, aangesien dit jou toelaat om jou gebruik te monitor en betaal vir bykomende toegang. Google Maps API v3 het 'n kwota van 1 versoek per sekonde per gebruiker tot 'n maksimum van 25,000 versoeke per dag. As jou bladsye die perke oorskry, moet jy fakture aktiveer om meer te kry.

Hoe om 'n Google Maps API sleutel te kry

1. Teken in by Google met jou Google-rekening.
2. Gaan na die Ontwikkelaarkonsole
3. Blaai deur die lys en vind die Google Maps API v3 en klik dan op die "OFF" knoppie om dit aan te skakel.
4. Lees en stem in tot die bepalings.
5. Gaan na die API se konsole en kies "API-toegang" in die linkerkieslys
6. Kliek in die gedeelte 'Eenvoudige API-toegang' op die knoppie 'Nuwe bediener sleutel maak'.
7. Voer die IP-adres van u webbediener in. Dit is die IP waar jou Kaarte-versoeke vandaan kom. As jy jou IP-adres nie ken nie, kan jy dit opkyk.
8. Kopieer die teks op die "API sleutel:" reël (nie daardie titel ingesluit nie). Dit is jou API sleutel vir jou kaarte.

02 van 05

Verander jou adres na koördinate

Om Google Maps op u webblaaie te kan gebruik, moet u die breedtegraad en lengtegraad vir die ligging hê. Jy kan dit van 'n GPS kry, of jy kan 'n aanlyn-hulpmiddel soos Geocoder.us gebruik om jou te vertel.

1. Gaan na Geocoder.us en tik jou adres in die soekkassie.
2. Kopieer die eerste nommer vir die breedtegraad (sonder 'n brief voor) en plak dit in 'n tekslêer. Jy het nie die graad (º) aanwyser nodig nie.
3. Kopieer die eerste nommer vir die lengtegraad (weer sonder 'n brief voor) en plak dit in jou tekslêer.

Jou breedtegraad en lengte sal so iets lyk:

40.756076
-73,990838

Geocoder.us werk net vir Amerikaanse adresse, as jy die koördinate in 'n ander land moet kry, moet jy soek na 'n soortgelyke instrument in jou streek.

03 van 05

Voeg die kaart by jou webbladsy

Voeg eers die Kaartskrip by die

van u dokument

Maak jou webblad oop en voeg die volgende by die hoof van jou dokument.

Verander die uitgeligte gedeelte na die breedtegraad en lengtegraad getalle wat u in stap twee neergeskryf het.

Tweedens, voeg die kaartelement by jou bladsy

Sodra u al die skrifelemente by die hoof van u dokument gevoeg het, moet u u kaart op die bladsy posisioneer. Jy doen dit deur 'n DIV-element by die id = "map-canvas"-kenmerk by te voeg. Ek beveel aan dat jy ook hierdie div styl met die breedte en hoogte wat op jou bladsy pas:

Laastens, laai en toets

Die laaste ding om te doen, is om jou bladsy op te laai en te toets wat jou kaart vertoon. Hier is 'n voorbeeld van 'n Google-kaart op die bladsy. Let wel, as gevolg van die manier waarop die About.com CMS werk, moet jy 'n skakel klik om die kaart te laat verskyn. Dit sal nie die geval wees op jou bladsy nie.

As jou kaart nie opdaag nie, probeer om dit te initialiseer met 'n BODY-kenmerk:

onload = "initialiseer ()" >

Ander dinge om na te gaan of jou kaart nie laai nie, sluit in:

• Kyk vir tikfoute in jou JavaScript, insluitende die geval. JavaScript is hoofletter sensitief.
• Maak seker dat u die soom- en sentrumopsies het.
• Maak seker dat jou DIV-element op die bladsy is met die korrekte ID.
• Maak seker dat jou DIV-element 'n hoogte het.

04 van 05

Voeg 'n merker by jou kaart

Maar hoe goed is 'n kaart van jou ligging as daar geen merker is waar mense moet gaan waarheen hulle moet gaan nie?

Om 'n standaard Google Maps-rooi merker by te voeg, voeg die volgende by jou skrif onder die var map = ... reël:

var myLatlng = nuwe google.maps.LatLng ( breedtegraad, lengtegraad );
var marker = nuwe google.maps.Marker ({
posisie: myLatlng,
kaart: kaart,
titel: " Voormalige About.com Headquarters "
});

Verander die gemerkte teks na jou breedtegraad en lengtegraad en die titel wat jy wil verskyn wanneer mense oor die merker beweeg.

Jy kan soveel merkers op die bladsy voeg as jy wil. Voeg net nuwe veranderlikes by met nuwe koördinate en titels, maar as die kaart te klein is om al die merkers te vertoon, sal dit nie wys nie tensy die leser uitkyk.

var latlng 2 = nuwe google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nuwe google.maps.Marker ({
posisie: latlng 2 ,
kaart: kaart,
titel: " Apple Computer "
});

Hier is 'n voorbeeld van 'n Google-kaart met 'n merker. Let wel, as gevolg van die manier waarop die About.com CMS werk, moet jy 'n skakel klik om die kaart te laat verskyn. Dit sal nie die geval wees op jou bladsy nie.

05 van 05

Voeg 'n tweede (of meer) kaart by jou bladsy

As jy na my voorbeeld Google Maps-bladsy gekyk het, sal jy sien dat ek meer as een kaart op die bladsy het. Dit is baie maklik om te doen. Hier is hoe.

1. Kry die breedtegraad en lengte van al die kaarte wat u wil vertoon soos ons in stap 2 van hierdie handleiding geleer het.
2. Voeg die eerste kaart in soos ons in stap 3 van hierdie handleiding geleer het. As jy wil hê dat die kaart 'n merker het, voeg die merker by soos in stap 4.
3. Vir die tweede kaart moet jy 3 nuwe lyne by jou initialize () script voeg:
   var latlng2 = nuwe google.maps.LatLng ( tweede koördinate );
   var myOptions2 = {zoom: 18, middel: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = nuwe google.mapsMap (document.getElementById ("map_canvas_2"), myOptions2);
4. As jy ook 'n merker op die nuwe kaart wil hê, voeg 'n tweede merker by die tweede koördinate en die tweede kaart:
   var myMarker2 = nuwe google.maps.Marker ({posisie: latlng2 , map: map2 , titel: " Your Marker Title "});
5. Voeg dan die tweede by

   waar jy die tweede kaart wil hê En gee dit 'n ID = "map_canvas_2" ID.

6. Wanneer u bladsy laai, sal twee kaarte vertoon word

Hier is die kode van 'n bladsy met twee Google Maps daarop: