Ki jan yo ajoute yon Google Map nan paj entènèt ou an

01 nan 05

Jwenn yon Google Maps API kle pou sit ou

Cloud View nan konsomatè a Google devlopè. Ekran piki pa J Kyrnin

Pi bon fason yo ajoute yon kat jeyografik Google nan sit entènèt ou se yo sèvi ak Google Maps API. Ak Google rekòmande ke ou jwenn yon kle API yo nan lòd yo sèvi ak kat yo.

Ou pa oblije jwenn yon kle API yo sèvi ak Google Maps API v3, men li trè itil jan li pèmèt ou kontwole l 'ou ak peye pou aksè adisyonèl. Google Maps API v3 gen yon kota nan 1 demann pou chak dezyèm pou chak itilizatè a yon maksimòm de 25,000 demann pou chak jou. Si paj ou yo depase limit sa yo ou pral bezwen pou fè bòdwo pou yo ka jwenn plis.

Kòman ou kapab jwenn yon Google Maps API Key

  1. Login sou Google lè l sèvi avèk kont Google ou.
  2. Ale nan Console a Devlopè
  3. Scroll nan lis la epi jwenn Google Maps API v3, Lè sa a, klike sou "OFF" bouton an vire l 'sou.
  4. Li epi mwen dakò ak kondisyon yo.
  5. Ale nan konsole APIs la epi chwazi "Aksè API" nan meni gòch la
  6. Nan seksyon "API senp aksè", klike sou "Kreye nouvo kle sèvè ..." bouton an.
  7. Antre nan adrès IP la nan sèvè wèb ou. Sa a se IP la kote demann Kat ou yo ap vini soti nan. Si ou pa konnen adrès IP ou, ou ka gade li.
  8. Kopi tèks la sou "API kle:" liy lan (pa enkli tit sa a). Sa a se kle API ou a pou kat ou yo.

02 nan 05

Konvèti Adrès ou nan Kowòdone

Itilize nimewo yo endike pou latitid ak lonjitid. Ekran piki pa J Kyrnin

Yo nan lòd yo sèvi ak Google Maps nan paj wèb ou, ou bezwen gen latitid la ak lonjitid pou kote a. Ou ka jwenn sa yo soti nan yon GPS oswa ou ka itilize yon zouti sou entènèt tankou Geocoder.us di ou.

  1. Ale nan Geocoder.us epi tape nan adrès ou nan bwat rechèch la.
  2. Kopi premye nimewo pou latitid la (san yon lèt devan) epi kole l nan yon dosye tèks. Ou pa bezwen endikatè degre (º).
  3. Kopi premye nimewo a pou lonjitid (ankò san yon lèt devan) epi kole l nan dosye tèks ou.

Latitid ou ak lonjitid ap gade yon bagay tankou sa a:

40.756076
-73.990838

Geocoder.us sèlman ap travay pou adrès US, si ou bezwen jwenn kowòdone yo nan yon lòt peyi, ou ta dwe fè rechèch pou yon zouti ki sanble nan rejyon ou an.

03 nan 05

Ajoute kat la nan paj entènèt ou an

Google Maps. Ekran piki pa J Kyrnin - Google Map koutwazi imaj

Premyèman, Add Script Script la a

Dokiman ou

Louvri paj entènèt ou epi ajoute sa ki annapre yo nan tèt ou nan dokiman ou.

Chanje pòsyon ki make nan latitid ak nimewo lonjitid ou te ekri nan etap de.

Dezyèmman, ajoute eleman Map nan paj ou

Yon fwa ou gen tout eleman yo script ajoute nan tèt la nan dokiman ou, ou bezwen pozisyon kat jeyografik ou a nan paj la. Ou fè sa lè ou ajoute yon eleman DIV ak id = "map-twal" atribi a. Mwen rekòmande ou tou style div sa a ak lajè a ak wotè ki pral anfòm sou paj ou a:

Finalman, Voye ak tès

Bagay ki sot pase a fè se Upload paj ou a ak tès ki montre kat ou an. Isit la se yon egzanp nan yon kat Google nan paj la. Remak, paske nan wout la CMS a About.com, ou pral gen klike sou yon lyen jwenn kat la parèt. Sa a pa pral ka a nan paj ou an.

Si kat ou an pa montre, eseye inisyalize li avèk yon atribi BODY:

onload = "inisyalize ()" >

Lòt bagay yo tcheke si kat ou a pa chaje gen ladan yo:

04 nan 05

Ajoute yon makè nan kat ou a

Google Map ak makè. Ekran piki pa J Kyrnin - Google Map koutwazi imaj

Men, ki sa ki bon se yon kat jeyografik nan kote ou si pa gen okenn makè di moun ki kote yo ta dwe ale?

Pou ajoute yon estanda Google Maps wouj makè ajoute sa ki annapre yo nan script ou anba a kat la var = ... liy:

var myLatlng = nouvo google.maps.LatLng ( latitid, lonjitid );
var marker = nouvo google.maps.Marker ({
pozisyon: myLatlng,
kat jeyografik: kat,
tit: " Ansyen katye jeneral "
});

Chanje tèks la make nan latitid ou ak lonjitid ak tit la ou ta renmen parèt lè moun hover sou makè la.

Ou ka ajoute kòm makè anpil nan paj la jan ou renmen, jis ajoute nouvo varyab ak kowòdone nouvo ak tit, men si kat la se twò piti yo montre tout makè yo, yo pa pral montre sof si lektè a zoom soti.

var latlng 2 = nouvo google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nouvo google.maps.Marker ({
pozisyon: latlng 2 ,
kat jeyografik: kat,
tit: " Apple Odinatè "
});

Isit la se yon egzanp nan yon kat Google ak yon makè. Remak, paske nan chemen an CMS a About.com, ou gen klike sou yon lyen jwenn kat la parèt. Sa a pa pral ka a nan paj ou an.

05 nan 05

Add yon dezyèm (oswa Plis) Map nan paj ou

Si ou te gade egzanp mwen Google kat paj ou pral remake ke mwen gen plis pase yon kat ki parèt nan paj la. Sa a se trè fasil fè. Men ki jan.

  1. Jwenn latitid ak lonjitid nan tout kat ou vle montre jan nou te aprann nan etap 2 nan Tutorial sa a.
  2. Antre kat premye a jan nou te aprann nan etap 3 nan Tutorial sa a. Si ou vle kat la gen yon makè, ajoute makè a kòm nan etap 4.
  3. Pou kat dezyèm lan, ou pral bezwen ajoute 3 liy nouvo nan inisyaliz ou a () script:
    var latlng2 = nouvo google.maps.LatLng ( dezyèm kowòdone );
    var myOptions2 = {zoom: 18, sant: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map2 = nouvo google.maps.Map (dokiman.getElementById ("map_canvas_2"), myOptions2);
  4. Si ou vle yon makè sou nouvo kat la tou, ajoute yon dezyèm makè montre nan kowòdone an dezyèm ak kat jeyografik dezyèm lan:
    var myMarker2 = nouvo google.maps.Marker ({pozisyon: latlng2 , kat jeyografik: map2 , tit: " Tit makè ou "});
  5. Lè sa a, ajoute dezyèm lan

    kote ou vle kat jeyografik dezyèm lan. Epi asire w ke ou bay li yon id = "map_canvas_2" ID.

  6. Lè charj paj ou a, de kat ap montre

Isit la se kòd la nan yon paj ki gen de Google Maps sou li: