Sut i Ychwanegu Map Google i'ch Tudalen We

01 o 05

Cael Allwedd API Google Maps ar gyfer eich Safle

Y ffordd orau o ychwanegu map Google i'ch gwefan yw defnyddio API Google Maps. Ac mae Google yn argymell eich bod yn cael allwedd API er mwyn defnyddio'r mapiau.

Nid oes gofyn i chi gael allwedd API i ddefnyddio API Google Maps v3, ond mae'n ddefnyddiol iawn gan ei fod yn eich galluogi i fonitro eich defnydd a thalu am fynediad ychwanegol. Mae gan Google Maps API v3 cwota o 1 cais yr eiliad fesul defnyddiwr hyd at uchafswm o 25,000 o geisiadau y dydd. Os yw'ch tudalennau yn rhagori ar y terfynau hynny bydd angen i chi alluogi biliau er mwyn cael mwy.

Sut i gael Allwedd API Google Maps

1. Mewngofnodi i Google gan ddefnyddio'ch cyfrif Google.
2. Ewch i'r Consol Datblygwyr
3. Sgroliwch drwy'r rhestr a darganfod API Google Maps v3, yna cliciwch y botwm "ODDI" i droi ymlaen.
4. Darllen a chytuno ar y telerau.
5. Ewch i'r consol API a dewis "API Access" o'r ddewislen chwith
6. Yn yr adran "Symud API Syml", cliciwch ar y botwm "Creu allwedd Gweinydd ... ...".
7. Rhowch gyfeiriad IP eich gweinydd gwe. Dyma'r IP lle bydd eich ceisiadau Mapiau yn dod. Os nad ydych chi'n gwybod eich cyfeiriad IP, gallwch ei edrych.
8. Copïwch y testun ar y llinell "API:" (heb gynnwys y teitl hwnnw). Dyma'ch allwedd API ar gyfer eich mapiau.

02 o 05

Trosi eich Cyfeiriad i Gydlynu

Er mwyn defnyddio Google Maps ar eich tudalennau gwe, bydd angen i chi gael y lledred a'r hydred ar gyfer y lleoliad. Gallwch chi gael y rhain o GPS neu gallwch ddefnyddio offeryn ar-lein fel Geocoder.us i ddweud wrthych.

1. Ewch i Geocoder.us a deipio yn eich cyfeiriad yn y blwch chwilio.
2. Copïwch y rhif cyntaf ar gyfer y lledred (heb lythyr o flaen) a'i gludo i mewn i ffeil testun. Nid oes angen y dangosydd gradd (º) arnoch chi.
3. Copïwch y rhif cyntaf ar gyfer y hydred (eto heb lythyr o flaen) a'i gludo i mewn i'ch ffeil destun.

Bydd eich lledred a hydred yn edrych fel hyn:

40.756076
-73.990838

Mae Geocoder.us yn gweithio i gyfeiriadau'r UD yn unig, os bydd angen i chi gael y cydlynu mewn gwlad arall, dylech chwilio am offeryn tebyg yn eich rhanbarth.

03 o 05

Ychwanegu'r Map i'ch Tudalen We

Yn gyntaf, Ychwanegu'r Sgript Map i'r

o'ch Dogfen

Agorwch eich tudalen we ac ychwanegu'r canlynol at PENNAETH eich dogfen.

Newid y gyfran a amlygwyd i'r rhifau lledred a hydred a ysgrifennwyd gennych yng ngham dau.

Yn ail, Ychwanegu'r Elfen Map i'ch Tudalen

Unwaith y bydd yr holl elfennau sgript wedi eu hychwanegu at PENNAETH eich dogfen, mae angen ichi osod eich map ar y dudalen. Rydych chi'n gwneud hyn trwy ychwanegu elfen DIV gyda'r priodwedd id = "map-gynfas". Rwy'n argymell eich bod hefyd yn arddull y div hwn gyda'r lled a'r uchder a fydd yn ffitio ar eich tudalen:

Yn olaf, Llwythwch a Phrawf

Y peth olaf i'w wneud yw llwytho'ch tudalen a phrofi bod eich map yn arddangos. Dyma enghraifft o fap Google ar y dudalen. Sylwer, oherwydd y ffordd y mae CMS About.com yn gweithio, bydd rhaid i chi glicio dolen i gael y map i ymddangos. Ni fydd hyn yn wir ar eich tudalen.

Os nad yw'ch map yn ymddangos, ceisiwch ei chymryd â phrif nodwedd CORFF:

onload = "cychwynnol ()" >

Mae pethau eraill i wirio a yw eich map ddim yn llwytho yn cynnwys:

• Chwiliwch am dypos yn eich JavaScript, gan gynnwys achos. Mae JavaScript yn achos sensitif.
• Gwnewch yn siŵr eich bod chi wedi gosod y dewisiadau chwyddo a chanolfan.
• Gwnewch yn siŵr bod eich elfen DIV ar y dudalen gyda'r ID cywir.
• Gwnewch yn siŵr fod gan eich elfen DIV uchder.

04 o 05

Ychwanegu Marcydd i'ch Map

Ond pa mor dda yw map o'ch lleoliad os nad oes marcydd yn dweud wrth bobl lle y dylent fynd?

I ychwanegu marcydd coch Google Maps safonol, ychwanegwch y canlynol i'ch sgript isod y map var = ... llinell:

var myLatlng = google.maps.LatLng newydd ( lledred, hydred );
var mark = new google.maps.Marker ({
swydd: myLatlng,
map: map,
Teitl: " Pencadlys Cyn Amdanom Ni "
});

Newid y testun a amlygwyd i'ch lledred a hydred a'r teitl yr hoffech ei weld pan fydd pobl yn trowch dros y marcydd.

Gallwch ychwanegu cymaint o farciau i'r dudalen fel y dymunwch, dim ond newidynnau newydd gyda chydlynu a theitlau newydd, ond os yw'r map yn rhy fach i arddangos yr holl farciau, ni fyddant yn dangos oni bai bod y darllenydd yn diflannu.

var latlng 2 = google.maps.LatLng newydd ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker newydd ({
safle: latlng 2 ,
map: map,
teitl: " Apple Computer "
});

Dyma enghraifft o fap Google gyda marcydd. Sylwer, oherwydd y ffordd y mae CMS About.com yn gweithio, rhaid i chi glicio dolen i gael y map i ymddangos. Ni fydd hyn yn wir ar eich tudalen.

05 o 05

Ychwanegu Map Ail (neu Fwy) i'ch Tudalen

Os ydych chi wedi edrych ar fy mhagram mapiau Google enghraifft, fe welwch fod gennyf fwy nag un map a ddangosir ar y dudalen. Mae hyn yn hawdd iawn i'w wneud. Dyma sut.

1. Cael lledred a hydred yr holl fapiau rydych chi am eu dangos wrth i ni ddysgu yng ngham 2 y tiwtorial hwn.
2. Rhowch y map cyntaf fel y dysgasom yng ngham 3 y tiwtorial hwn. Os ydych chi am i'r map gael marcydd, ychwanegwch y marc fel yng ngham 4.
3. Ar gyfer yr ail fap, bydd angen i chi ychwanegu 3 linell newydd i'ch sgript cychwynnol () sgript:
   var latlng2 = new google.maps.LatLng ( ail gydlynu );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = google.maps.Map newydd (document.getElementById ("map_canvas_2"), myOptions2);
4. Os ydych chi eisiau marcydd ar y map newydd hefyd, ychwanegwch ail nodyn yn pwyntio yn yr ail gyfesurynnau a'r ail fap:
   var myMarker2 = google.maps.Marker newydd ({position: latlng2 , map: map2 , title: " Your Marker Title "});
5. Yna ychwanegwch yr ail

   lle rydych chi eisiau yr ail fap. A sicrhewch roi id id = "map_canvas_2" ID.

6. Pan fydd eich tudalen yn llwyth, bydd dau fap yn arddangos

Dyma god tudalen gyda dau fap Google arno: