Mar a chuireas tu mapa Google ri do dhuilleag lìn

01 de 05

Faigh Ceart API Google Maps airson do Làrach

Is e an dòigh as fheàrr air mapa Google a chur ris an làrach-lìn agad gus API Google Maps a chleachdadh. Agus tha Google a 'moladh gun faigh thu iuchair API gus na mapaichean a chleachdadh.

Chan fheum thu iuchair API gus Google Maps API v3 a chleachdadh, ach tha e gu math feumail oir tha e a 'leigeil leat sùil a chumail air an cleachdadh agad agus pàigheadh ​​airson ruigsinneachd a bharrachd. Tha cuota de 1 iarrtas gach dàrna diog aig gach neach-cleachdaidh aig Google Maps API v3 gu suas ri 25,000 iarrtas gach latha. Ma tha na duilleagan agad a 'dol thairis air na crìochan sin a dh' fheumas tu gus bileag a cheadachadh gus barrachd fhaighinn.

Mar a gheibh thu Prìomh API Google Maps

1. Log a-steach gu Google a 'cleachdadh a' chunntais Ghoogle agad.
2. Rach gu Console an Luchd-leasachaidh
3. Gluais tron ​​liosta agus lorg Google Maps API v3, agus briog air a 'phutan "OFF" gus tionndadh air.
4. Leugh agus aontaich na teirmean.
5. Rachaibh chun consola APIs agus tagh "API Access" bhon chlàr air an làimh chlì
6. Anns an earrainn "Simple API Access", briog air a 'phutan "Cruthaich iuchair ùr Freastair ...".
7. Cuir a-steach seòladh IP an fhrithealaiche lìn agad. Is e seo an IP far am bi na h-iarrtasan air na mapaichean agad a 'tighinn. Mura h-eil fios agad air an t-seòladh IP agad, faodaidh tu coimhead air.
8. Dèan lethbhreac den teacs air loidhne "key API:" (gun a bhith a 'gabhail a-steach an tiotal sin). Seo an iuchair API airson do mhapaichean.

02 de 05

Tionndaidh do sheòladh gu co-òrdanaidhean

Gus a bhith a 'cleachdadh Google Maps air na duilleagan-lìn agad, feumaidh tu an domhan-leud agus an fhad-loidhne a bhith agad airson an àite. Gheibh thu iad sin bho GPS no faodaidh tu inneal air-loidhne a chleachdadh mar Geocoder.us gus innse dhut.

1. Rach gu Geocoder.us agus sgrìobh do sheòladh a-steach sa bhogsa rannsachaidh.
2. Dèan lethbhreac den chiad àireamh airson an domhan-leud (gun litir air beulaibh) agus cuir a-steach e ann am faidhle teacsa. Chan fheum thu an comharradh ceum (º).
3. Dèan lethbhreac den chiad àireamh airson an fhad (a-rithist gun litir air beulaibh) agus cuir a-steach e don fhaidhle teacsa agad.

Bidh an domhan-leud agus an loidhne agad a 'coimhead coltach ri seo:

40.756076
-73.990838

Chan eil Geocoder.us ag obair airson seòlaidhean US ach ma dh'fheumas tu na co-chomharran fhaighinn ann an dùthaich eile, bu chòir dhut inneal coltach ris a lorg anns an sgìre agad.

03 de 05

A 'cur ris a' mhapa chun do dhuilleag lìn

An toiseach, cuir ris an Sgriobt Mapa gu

de Do Sgrìobhainn

Fosgail do dhuilleag-lìn agus cuir na leanas gu HEAD den sgrìobhainn agad.

Atharraich a 'chuibhreann a chaidh a chomharrachadh gu na h-àireamhan domhan-leud agus fad-ùine a sgrìobh thu sìos ann an ceum a dhà.

San dàrna àite, cuir ris an eilim mapa leis an duilleag agad

Aon uair 's gu bheil na h-eileamaidean sgriobt agad air an cur ri HEAD den sgrìobhainn agad, feumaidh tu am mapa agad a shuidheachadh air an duilleig. Bidh thu a 'dèanamh seo le bhith a' cur a-steach DIV eilthireachd leis a 'ghnè id = "map-canvas". Tha mi a 'moladh gum bi thu a' stoidhleadh an div seo leis an leud agus an àirde a bhios freagarrach air do dhuilleag:

Mu dheireadh, Upload is Test

Is e an rud mu dheireadh a nì thu suas do dhuilleag agus dearbhadh gu bheil an mapa agad a 'taisbeanaidhean. Seo eisimpleir de mhap Google air an duilleig. Thoir fa-near, a thaobh mar a tha CMS About.com ag obair, feumaidh tu briogadh air ceangal gus am faic thu am mapa. Cha bhith seo a 'tachairt air do dhuilleag.

Mura h-eil am mapa agad a 'nochdadh suas, feuch a thòiseachadh le buannachd BODY:

onload = "toisich a-steach ()" >

Am measg rudan eile a dh'fhaodar dèanamh cinnteach nach eil am mapa agad a 'lughdachadh tha:

• Coimhead airson typos anns an JavaScript agad, cùis nam measg. Tha JavaScript cùramach.
• Dèan cinnteach gu bheil an t-sùim agus roghainnean an ionaid agad.
• Dèan cinnteach gu bheil an eileamaid DIV agad air an duilleig leis an ID cheart.
• Dèan cinnteach gu bheil àirde aig an eileamaid DIV agad.

04 de 05

Cuir comharran ris a 'mhapa agad

Ach dè cho math 'sa tha mapa de do làrach mura h-eil comharraiche ann a tha ag innse do dhaoine far am bu chòir dhaibh a dhol?

Gus comharraiche dearg coitcheann Google Maps a chur ris na leanas a chur ris an sgriobt agad fon var map = ... loidhne:

var myLatlng = google new.maps.LatLng ( domhan-leud, loidhne );
var marker = new google.maps.Marker ({
suidheachadh: myLatlng,
mapa: mapa,
tiotal: " Ceann-suidhe Ro-làimh mu Cheann a-Muigh "
});

Atharraich an teacsa a tha air a chomharrachadh gu do domhan-leud agus do fhad-leud agus an tiotal a bu toigh leat nochdadh nuair a tha daoine a 'dol thairis air a' chomharra.

Faodaidh tu uiread de chomharran a chur ris an duilleag mar a thogras tu, dìreach atharraichidhean ùra le co-chomharran is tiotalan ùra, ach ma tha am map ro bheag airson na comharran gu lèir a shealltainn, cha nochd iad mura h-eil an leughadair a 'sìneadh a-mach.

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = google new.maps.Marker ({
suidheachadh: latlng 2 ,
mapa: mapa,
tiotal: " Apple Computer "
});

Seo eisimpleir de mhap Google le comharraiche. Thoir fa-near, a thaobh mar a tha CMS About.com ag obair, feumaidh tu briogadh air ceangal gus am faic thu am mapa. Cha bhith seo a 'tachairt air do dhuilleag.

05 de 05

Cuir dàrna duilleag (no barrachd) ris an duilleag agad

Ma sheallas tu air an duilleag agam mapa mapa Ghoogle, chì thu gu bheil barrachd air aon mhapa agam a tha air a thaisbeanadh air an duilleig. Tha seo gu math furasta a dhèanamh. Seo mar a tha.

1. Faigh an domhan-leud agus fad na mapaichean a tha thu airson a shealltainn mar a dh'ionnsaich sinn ann an ceum 2 den oideachadh seo.
2. Cuir a-steach a 'chiad mhapa mar a dh'ionnsaich sinn ann an ceum 3 den oideachadh seo. Ma tha thu ag iarraidh comharradh a bhith aig a 'mhap, cuir ris a' chomharra mar ann an ceum 4.
3. Airson an dàrna mapa, feumaidh tu trì loidhnichean ùra a chur ris a 'chiad sgriobt agad ():
   var latlng2 = new google.maps.LatLng ( dàrna co-chomharran );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ma tha thu ag iarraidh comharraiche air a 'mhapa ùr cuideachd, cuir dàrna comharraiche a-steach aig an dàrna co-chomharran agus an dàrna mapa:
   var myMarker2 = google.maps.marker ({position: latlng2 , map: map2 , title: " Your Titleer Title "});
5. An uairsin cuir ris an dàrna fear

   far a bheil thu ag iarraidh an dàrna mapa. Agus bi cinnteach gum faigh thu id = "map_canvas_2" ID.

6. Nuair a bhios do dhuilleag a 'lìonadh, nochdaidh dà mhapa

Seo còd duilleag le dà mhapa Google air: