Indlela yokongeza i-Google Map kwi-Web Page yakho

01 ngo 05

Fumana i-Google Maps API Key kwiSayithi lakho

Indlela engcono yokufaka imephu yeGoogle kwiwebhusayithi yakho ukusebenzisa i-Google Maps API. Futhi i-Google icebisa ukuba ufumane ukhiye we-API ukuze usebenzise iimephu.

Awunyanzelwanga ukuba ufumane i-API iqhosha ukusebenzisa i-Google Maps API v3, kodwa iluncedo njengoko ikuvumela ukuba uqaphele ukusetyenziswa kwakho kwaye uhlawule ukufikelela okongeziweyo. I-Google Maps API v3 inomlinganiselo wesicelo esisodwa ngesibini ngomsebenzisi ukuya kwizicelo ezingaphezulu kwama-25,000 ngosuku. Ukuba iphepha lakho lidlula loo mida uza kuyidinga ukunika amandla ukuhlawula ukuze ufumane ngaphezulu.

Indlela yokufumana i-Google Maps API Key

1. Ngena kwiGoogle usebenzisa i-akhawunti yakho ye-Google.
2. Yiya kwi-Console Developers
3. Skrola ngokusebenzisa uludwe uze ufumane iGoogle Maps API v3, uze uklibhoze iqhosha "OFF" ukulivula.
4. Funda kwaye uvumelane nemimiselo.
5. Yiya kwi-console ye-APIs uze ukhethe "Ukufikelela kwe-API" kwimenyu yokunxele
6. Kwiqendu elithi "Ulula lwe-API", nqakraza kwi "Yakha ikhi yoNcedisi ye-Server ...".
7. Faka idilesi ye-IP yomncedisi wakho wewebhu. Le yi IP apho izicelo zakho zeMaphu ziya kuza khona. Ukuba awukwazi idilesi yakho ye-IP, unokuyijonga.
8. Kopisha umbhalo kwi "API key:" umgca (kungabandakanywa eso sihloko). Le yifayile yakho ye-API kwiimephu zakho.

02 we 05

Ukuguqula Idilesi Yakho Kuququzelele

Ukuze usebenzise iGoogle Maps kumaphepha akho ewebhu, kufuneka ube nebala nobude bendawo. Unokufumana ezi zinto kwi-GPS okanye ungasebenzisa ithuluzi le-intanethi njengeGeocoder.us ukukuxelela.

1. Yiya kwiGeocoder.us uze uthayiphe ekhelini lakho kwibhokisi lokukhangela.
2. Kopisha inombolo yokuqala ye-latitude (ngaphandle kwetalela ngaphambili) kwaye unamathisele kwifayile yombhalo. Awudingi umlinganiselo (º) wesalathisi.
3. Kopisha inombolo yokuqala yobude (kwakhona ngaphandle kwetalela ngaphambili) kwaye unamathisele kwifayile yakho yombhalo.

Ububanzi bakho nobude bakho buzakujonga into enje:

40.756076
-73.990838

I-Geocoder.us isebenza kuphela kwiidilesi zase-US, ukuba ufuna ukulungelelanisa kwelinye ilizwe, kufuneka ufune isilathisi esifanayo kummandla wakho.

03 we 05

Ukongeza iMephu kwiWebhusayithi Yakho yeWebhu

Okokuqala, Yongeza iSkripthi kwiMaphu kwi

Ixwebhu Lakho

Vula iphepha lakho lewebhu uze ungeze oku ku-HEAD kwidokhumenti yakho.

Shintsha isahluko esikhankanywe kwiimpawu zobuninzi nezobude ozibhala phantsi kwisibini.

Okwesibini, Yongeza iMephu Ekhompyutheni Yakho

Emva kokuba unayo yonke into ebhalwe phantsi kwi-HEAD yomqulu wakho, kufuneka ubeke imephu yakho kwiphepha. Ukwenza oku ngokufaka isici se-DIV kunye ne-id = "imephu-yombane". Ndiyincoma ukuba usebenzise le div ngebubanzi nobude obuya kufana nekhasi lakho:

Ekugqibeleni, Layisha kunye novavanyo

Into yokugqibela uyenzayo ukulayisha iphepha lakho kunye nokuvavanywa kwemephu yakho. Nantsi umzekelo wemephu yeGoogle kwiphepha. Qaphela, ngenxa yendlela indlela i-About.com CMS isebenza ngayo, kufuneka uqakraze ikhonkco ukuze imephu ibonakale. Oku akuyi kuba njalo kwiphepha lakho.

Ukuba imephu yakho ayibonakali, zama ukuyiqalisa nge-BODY:

ukulayishwa = "qalisa ()" >

Ezinye izinto ukujonga ukuba imephu yakho ayiyi kulayisha iquka:

• Khangela i-typos yakho kwiJavaScript, kubandakanye na ityala. I-JavaScript yinkcazo efanelekileyo.
• Qinisekisa ukuba unesondeza kunye nokukhethwa kweziko.
• Qinisekisa ukuba isici sakho se-DIV sekhasini kunye ne-ID echanekileyo.
• Qinisekisa ukuba isici sakho se-DIV sinokuphakama.

04 we 05

Yongeza iMakethi kwiMephu Yakho

Kodwa yintoni imephu efanelekileyo kwindawo yakho ukuba akukho mqondiso oxelela abantu apho kufuneka bahambe khona?

Ukongeza uphawu oluqhelekileyo lwe-Google Maps marker kongeza ezi zilandelayo kwiskripthi sakho ngaphantsi kwevar map = ... line:

var myLatlng = entsha google.maps.LatLng ( ububanzi, ubude );
var marker = entsha google.maps.Marker ({
isikhundla: myLatlng,
imephu: imephu,
Isihloko esithi: " Indlu yangaphambili ye-About.com "
});

Sitshintsha umbhalo ogqityiweyo kwi-latitude kunye nobude bakho kunye nesihloko ongathanda ukubonakala xa abantu behamba phezu komakishi.

Unokongeza amanqaku amaninzi kwiphepha njengoko uthanda, faka nje uguqulo olutsha kunye neziqulatho ezintsha, kodwa ukuba imephu imncinci kakhulu ukuba ibonise onke amanqaku, abayi kubonisa ngaphandle kokuba umfundi aphephe.

var latlng 2 = entsha google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = entsha google.maps.Marker ({
isikhundla: latlng 2 ,
imephu: imephu,
isihloko: " Apple Computer "
});

Nantsi umzekelo wemephu yeGoogle eneemakishi. Qaphela, ngenxa yendlela indlela i-About.com CMS isebenza ngayo, kufuneka uklikha umnxeba ukuze uvele imephu. Oku akuyi kuba njalo kwiphepha lakho.

05 we 05

Yongeza Okwesibini (okanye ngaphezulu) Imephu kwiKhosi Lakho

Ukuba ukhangele embonweni wam maphondo eGoogle uza kubona ukuba ndinemephu engaphezulu kweyodwa eboniswe kwiphepha. Oku kulula ukwenza. Nantsi indlela.

1. Fumana ububanzi nobude bazo zonke iimephu ofuna ukubonisa njengoko sifunde kwisinyathelo 2 sale khokelo.
2. Faka imephu yokuqala njengoko sifunde kwisinyathelo 3 sale khokelo. Ukuba ufuna imephu ibe nommakishi, yongeza umakishi njengesiqendu 4.
3. Kwimephu yesibini, kuya kufuneka udibanise imigca emithathu kwi-initialize () script:
   var latlng2 = i-google.maps.LatLng ( izilungelelaniso zesibini );
   var myOptions2 = {zoom: 18, ephakathi: latlng2, imephuTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = entsha google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ukuba ufuna ummakethi kwimephu entsha, faka umakishi wesibini ekhomba kwiingqungquthela zesibini kunye nemephu yesibini:
   var myMarker2 = entsha google.maps.Marker ({isikhundla: latlng2 , imephu: imephu2 , isihloko: " Isihloko sakho seMakethi "});
5. Bese ukongeza isibini

   apho ufuna ibalazwe lesibini. Qiniseka ukuba uyinike id = "map_canvas_2" ID.

6. Xa iphepha lakho lithwala, imephu emibini iya kubonisa

Nantsi ikhowudi yephepha ngeemephu ezimbini zeGoogle kuyo: