Kamoo u ka kenyang Google Map ho Websaeteng ea hau

01 ea 05

Fumana Motlolo oa Google Maps API bakeng sa Sebaka sa hau

Tsela e molemohali ea ho eketsa 'mapa oa Google ho websaete ea hau ke ho sebelisa Google Maps API. 'Me Google e khothalletsa hore u fumane senotlolo sa API e le hore u sebelise limmapa.

Ha ho hlokahale hore u fumane senotlolo sa API ho sebelisa Google Maps API v3, empa e le thuso haholo hobane e u lumella hore u hlahlobe tšebeliso ea hau le ho lefa bakeng sa ho fumana kakaretso. Google Maps API v3 e na le karolo ea kopo e le 1 ka motsotso ka user ho fihlela likopo tse 25 000 ka letsatsi. Haeba maqephe a hau a feta meeli eo u tla e hloka ho lumella ho lefella e le hore u fumane ho eketsehileng.

Tsela ea ho fumana Google Maps API Key

1. Kenya ho Google ho sebelisa akhaonto ea hau ea Google.
2. Eya ho Developers Console
3. Hlakola lethathamong 'me u fumane Google Maps API v3, ebe u tobetsa konopo ea "OFF" ho e bula.
4. Bala 'me u lumellane le mantsoe.
5. E-ea ho console ea APIs 'me u khethe "Access Access" ho tloha ka letsohong le letšehali
6. Ka karolo ea "Access Simple API Access", tobetsa konopo ea "Bopa konopo ea" ... ".
7. Kenya aterese ea IP ea seva sa hau sa hau. Ena ke IP moo litlhoko tsa hau tsa Maps li tla tsoa teng. Haeba u sa tsebe aterese ea hau ea IP, u ka e sheba.
8. Kopitsa temana ea "Key API:" line (e sa kenyeletsang sehlooho seo). Ena ke senotlolo sa hau sa API bakeng sa limmapa tsa hau.

02 ea 05

Fetola Aterese ea Hao ho Likopano

E le hore u sebelise Google Maps maqepheng a hau a maqephe, u hloka ho ba le sebaka le longitude bakeng sa sebaka seo. U ka li fumana ho GPS kapa u ka sebelisa sesebelisoa sa inthanete joaloka Geocoder.us ho u bolella.

1. Eya Geocoder.us mme u thaepe atereseng ea hau lebokoseng la ho batla.
2. Kopitsa nomoro ea pele bakeng sa latitude (ntle le lengolo ka pele) ebe ue kenya ka faele ea litokomane. Ha o hloke tekanyetso ea tekanyo (º).
3. Kopitsa nomoro ea pele ea bochabela (hape ntle le lengolo le ka pele) ebe ue kenya ka faele ea hau ea temana.

Libaka le bolelele ba hau bo tla sheba ntho e kang ena:

40.756076
-73.990838

Geocoder.us e sebetsa feela bakeng sa liaterese tsa US, haeba u hloka ho fumana likonteraka naheng e 'ngoe, u lokela ho batla sesebelisoa se tšoanang sebakeng sa heno.

03 ea 05

Ho eketsa 'Mapa ho Websaeteng ea hau

Ntlha ea pele, eketsa Map Script ho ea

ea Lengolo la hau

Bula leqephe la hau la marang-rang 'me u kenye tse latelang ho HEAD ea tokomane ea hau.

Fetola karolo e totobetseng ho ea likarolong tsa latitude le tsa bo-longitude tseo u li ngotseng mohato oa bobeli.

Ntlha ea bobeli, eketsa 'Mete oa Element ho Leqephe la Hao

Hang ha u na le likarolo tsohle tsa script tse kenyelletsitsoeng ho HEAD ea tokomane ea hau, u lokela ho beha 'mapa oa hau leqepheng. U etsa sena ka ho eketsa ntho ea DIV e nang le tšobotsi ea "map-canvas". Kea nkhothaletsa hore u boele u bolele div ena ka bophara le bophahamo bo tla tšoana le leqephe la hau:

Qetellong, kenya le ho leka

Ntho ea ho qetela eo u lokelang ho e etsa ke ho kenya leqephe la hao le teko ea 'mapa oa hau. Mona ke mohlala oa 'mapa oa Google leqepheng lena. Hlokomela, ka lebaka la tsela ea About.com CMS e sebetsang, o tla tlameha ho tobetsa konteraka ho fumana 'mapa o hlahe. Sena ha se tla ba joalo ka leqepheng la hau.

Haeba 'mapa oa hau o sa hlahe, leka ho o qalisa ka tšobotsi ea BODY:

on load = "initialize ()" >

Lintho tse ling ho hlahloba hore na 'mapa oa hau ha o li kenyelletsang li kenyeletsa:

• Batla typos ho JavaScript ea hau, ho kenyeletsa le nyeoe. JavaScript e na le bothata bo boholo ba boemo bo itseng.
• Etsa bonnete ba hore o na le lisebelisoa tsa boitsebiso le boitsebiso ba setsi.
• Etsa bonnete ba hore DIV ea hau e teng leqepheng le ID e nepahetseng.
• Etsa bonnete ba hore DIV ea hau e na le bolelele.

04 ea 05

Kenya Letšoao ho 'Mapa oa hau

Empa 'mapa oa sebaka sa hau ke eng ha ho se na marker ho bolella batho moo ba lokelang ho ea teng?

Ho eketsa letšoao le tloaelehileng la Google Maps e khubelu eketsa tse latelang ho script ka tlase ho var map = ... line:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
boemo: myLatlng,
'mapa:' mapa,
sehlooho: " Ntlo-khōlō ea khale ea About.com "
});

Fetola temana e totobetseng ho ea ka sebaka sa hau sa boroa le sebaka seo u ka ratang ho se hlahisa ha batho ba ema holim'a maraka.

U ka eketsa mekhabiso e mengata leqepheng lena kamoo u ratang kateng, feela kenya mechine e ncha ka likaroloana tse ncha le litlotla, empa haeba 'mapa o monyenyane haholo hore o ka hlahisa likarolo tsohle, li ke ke tsa bontša ntle le hore' mali a leke.

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

Mona ke mohlala oa 'mapa oa Google o nang le letšoao. Hlokomela, ka lebaka la tsela eo About.com CMS e sebetsang ka eona, u tlameha ho tobetsa konteraka ho fumana 'mapa o hlahe. Sena ha se tla ba joalo ka leqepheng la hau.

05 ea 05

Kenya Ea Bobeli (kapa Ho Eketsehileng) Mapa ho Leqephe la Hao

Haeba u se u shebile leqephe la ka la maqephe a Google, u tla hlokomela hore ke na le 'mapa o fetang o le mong o bontšitsoeng leqepheng. Sena se bonolo haholo ho se etsa. Mona ke kamoo.

1. Fumana sebaka le sebaka sa 'mapa' ohle oo u batlang ho o bontša joalokaha re ithutile mohatong oa 2 oa thuto ena.
2. Kenya mapaolo a pele joalokaha re ithutile mohato oa boraro oa thuto ena. Haeba u batla hore 'mapa o be le letšoao, eketsa letšoao ho latela mohato oa 4.
3. Bakeng sa 'mapa oa bobeli, ho tla hlokahala hore u kenye mela e mecha e meraro ho initialize () script:
   var latlng2 = new google.maps.LatLng ( bobeli bobeli );
   var myOptions2 = {zoom: 18, bohareng: latlng2, 'mapaTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("mapa_canvas_2"), myOptions2);
4. Haeba u batla letšoao ho 'mapa o mocha hape, eketsa letšoao la bobeli le bontšang likaroloana tsa bobeli le' mapa oa bobeli:
   var myMarker2 = new google.maps.Marker ({boemo: latlng2 , 'mapa: map2 , sehlooho: " Sehlooho sa hau sa Marker "});
5. Ebe o eketsa ea bobeli

   moo u batlang 'mapa oa bobeli. 'Me u tiise hore u e fa id = "map_canvas_2" ID.

6. Ha leqephe la hau le jara, limmapa tse peli li tla bontša

Hona ke khoutu ea leqephe le nang le limmapa tse peli tsa Google ho eona: