Conas Léarscáil Google a Chur chuig Do Leathanach Gréasáin

01 de 05

Faigh Eochair API Google Maps do Do Láithreán

Is é an bealach is fearr chun léarscáil Google a chur ar do láithreán gréasáin ná Google Maps API a úsáid. Agus molann Google go bhfaighidh tú eochair API chun na léarscáileanna a úsáid.

Ní gá duit eochair API a fháil chun Google Maps API v3 a úsáid, ach tá sé an-úsáideach mar go ligeann sé duit monatóireacht a dhéanamh ar d'úsáid agus íoc as rochtain bhreise. Tá cuóta 1 iarratas in aghaidh an dara in aghaidh an úsáideora ag Google Maps API v3 le huasmhéid de 25,000 iarratas in aghaidh an lae. Má sháraíonn do chuid leathanaigh na teorainneacha sin is gá duit billeáil a chumasú chun níos mó a fháil.

Conas Eochair API Google Maps a fháil

1. Logáil isteach go Google ag baint úsáide as do chuntas Google.
2. Téigh go dtí an Console Forbróirí
3. Scrollaigh tríd an liosta agus faigh an Google Maps API v3, ansin cliceáil ar an gcnaipe "OFF" chun é a chur air.
4. Léigh na téarmaí a léamh agus aontú leo.
5. Téigh go dtí an consól APIs agus roghnaigh "Rochtain API" ón roghchlár ar chlé
6. Sa rannóg "Rochtain API Simplí", cliceáil ar an gcnaipe "Cruthaigh eochair Freastalaí nua ...".
7. Cuir isteach seoladh IP do fhreastalaí gréasáin. Seo é an IP ina dtiocfaidh d'iarratais ar Léarscáileanna. Mura bhfuil a fhios agat do sheoladh IP, is féidir leat é a chur ar bun.
8. Cóipeáil an téacs ar an líne "eochair API:" (gan an teideal sin a áireamh). Seo é an eochair API do do léarscáileanna.

02 de 05

Tiontaigh Do Seoladh chuig Comhordanáidí

D'fhonn Google Maps a úsáid ar do leathanaigh ghréasáin, is gá duit an domhanleithead agus an domhan a bheith acu don suíomh. Is féidir leat iad seo a fháil ó GPS nó is féidir leat uirlis ar líne a úsáid mar Geocoder.us a insint duit.

1. Téigh go Geocoder.us agus cineál isteach i do sheoladh sa bhosca cuardaigh.
2. Cóip an chéad uimhir don domhanleithead (gan litir os comhair) agus é a ghreamú isteach i gcomhad téacs. Ní gá duit an táscaire céim (º).
3. Cóip an chéad uimhir don fhad (arís gan litir os comhair) agus é a ghreamú isteach i do chomhad téacs.

Breathnaíonn do domhanleithead agus d'fhírinne mar seo:

40.756076
-73.990838

Oibríonn Geocoder.us le haghaidh seoltaí US amháin, más gá duit na comhordanáidí a fháil i dtír eile, ba cheart duit uirlis den chineál céanna a lorg i do réigiún.

03 de 05

An Léarscáil a Chur chuig Do Leathanach Gréasáin

Gcéad dul síos, Cuir an Script Léarscáil leis an

de Do Doiciméad

Oscail do leathanach gréasáin agus cuir an méid seo a leanas chuig HEAD de do dhoiciméad.

Athraigh an chuid béimithe ar na huimhreacha domhanleithead agus domhanfhad fhad a scríobh tú i gcéim a dó.

Ar an dara dul síos, cuir an eilimint léarscáil le do leathanach

Nuair a bheidh na heilimintí script go léir curtha le HEAD de do chuid doiciméad, caithfidh tú do léarscáil a sheasamh ar an leathanach. Déanann tú é seo trí ghné DIV a chur leis an tréith id = "map-canvas". Molaim duit an div seo a stíl chomh maith leis an leithead agus an airde a bheidh oiriúnach ar do leathanach:

Ar deireadh, Uaslódáil agus Tástáil

Is é an rud deireanach le déanamh ná do leathanach a uaslódáil agus a thástáil go léiríonn do léarscáil. Seo sampla de léarscáil Google ar an leathanach. Tabhair faoi deara, mar gheall ar an mbealach a oibríonn CMS About.com, beidh ort cliceáil ar nasc chun an léarscáil a dhéanamh le feiceáil. Ní hé seo an cás ar do leathanach.

Mura léiríonn do léarscáil suas, déan iarracht é a thosú le tréith COMHLACHTA:

onload = "tosaigh ()" >

I measc rudaí eile le seiceáil an bhfuil do léarscáil á luchtú, tá:

• Cuardaigh typos i do JavaScript, cás san áireamh. Tá JavaScript cás íogair.
• Déan cinnte go bhfuil an súmáil agus na roghanna lárnacha leagtha amach agat.
• Déan cinnte go bhfuil do ghné DIV ar an leathanach leis an ID ceart.
• Déan cinnte go bhfuil airde d'eilimint DIV.

04 de 05

Cuir Marcóir ar Do Léarscáil

Ach cad é go maith léarscáil de do shuíomh mura bhfuil aon marcóir ag insint do dhaoine ar chóir dóibh dul?

Le marcóir dearg caighdeánach Google Maps a chur leis an méid seo a leanas chuig do script thíos an var map = ... líne:

var myLatlng = google.maps.LatLng nua ( domhanleithead, domhanfhad );
var marc = new google.maps.Marker ({
seasamh: myLatlng,
léarscáil: léarscáil,
teideal: " Ceanncheathrú Iar-Amach "
});

Athraigh an téacs béimithe ar do domhanleithead agus ar an domhanleithead agus an teideal ar mhaith leat a bheith le feiceáil nuair a bhíonn daoine ag dul thar an marcóir.

Is féidir leat an oiread marcóirí a chur leis an leathanach mar is mian leat, ach athróga nua a chur leis na comhordanáidí agus na teidil nua, ach má tá an léarscáil ró-bheag chun na marcóirí go léir a thaispeáint, ní thaispeánfaidh siad mura dtiocfaidh an léitheoir amach.

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker nua ({
seasamh: latlng 2 ,
léarscáil: léarscáil,
teideal: " Apple Computer "
});

Seo sampla de léarscáil Google le marcóir. Tabhair faoi deara, mar gheall ar an mbealach a oibríonn CMS About.com, caithfidh tú cliceáil ar nasc chun go mbeidh an léarscáil le feiceáil. Ní hé seo an cás ar do leathanach.

05 de 05

Cuir Léarscáil Dara (nó níos mó) ar do leathanach

Má fhéach tú ar mo leathanach léarscáil Google mar shampla, feicfidh tú go bhfuil níos mó ná léarscáil amháin ar taispeáint ar an leathanach. Tá sé seo an-éasca le déanamh. Seo an chaoi.

1. Faigh domhanleithead agus fad na léarscáileanna uile ar mhaith leat a thaispeáint mar a d'fhoghlaim muid i gcéim 2 den teagasc seo.
2. Cuir isteach an chéad léarscáil mar a d'fhoghlaim muid i gcéim 3 den teagasc seo. Más mian leat marcóir a bheith agat, cuir an marcóir i gcéim 4.
3. Maidir leis an dara léarscáil, beidh ort 3 líne nua a chur leis do script tosaigh ():
   var latlng2 = new google.maps.LatLng ( dara comhordanáidí );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Má theastaíonn uait marcóir ar an léarscáil nua freisin, cuir dara marcóir leis ag an dara comhordanáidí agus an dara léarscáil:
   var myMarker2 = google.maps.Marker nua ({position: latlng2 , map: map2 , title: " Do Marcer Title "});
5. Ansin cuir an dara ceann

   áit ar mhaith leat an dara léarscáil. Agus a bheith cinnte a thabhairt id id = "map_canvas_2" ID.

6. Nuair a bheidh ualaí do leathanach, taispeánfar dhá léarscáil

Seo cód an leathanaigh le dhá léarscáil Google air: