Yuav ua li cas ntxiv ib daim qhia Google hauv koj lub Web Page

01 ntawm 05

Tau txais Google Maps API Qhov Tseem Ceeb rau Koj Qhov Chaw

Txoj kev zoo tshaj los ntxiv Google daim ntawv qhia rau koj lub vev xaib yog siv Google Maps API. Thiab Google pom zoo kom koj tau txais ib qho tseem ceeb API kom thiaj li siv tau cov duab.

Koj tsis tas yuav tau txais ib qho tseem ceeb API siv Google Maps API v3, tab sis nws tseem ceeb heev thaum nws cia koj saib xyuas koj cov kev pab thiab them nyiaj ntxiv rau. Google Maps API v3 muaj ib qho kev txiav nyiaj ntawm 1 daim ntawv thov ib zaug twg ib zaug twg rau ib tus neeg siv kom ntau tshaj 25,000 thov tauj ib hnub. Yog tias koj cov nplooj ntawv tshaj li cov kev txwv koj yuav tsum tau muaj peev xwm ua kom tiav nyiaj thiaj li tau txais ntau dua.

Yuav ua li cas kom tau txais Google Maps API Ntsiab

1. Nkag mus rau Google siv koj tus account Google.
2. Mus rau cov Neeg Tsim Qauv Sib Cuag
3. Scroll hauv daim ntawv thiab nrhiav Google Maps API v3, ces nyem qhov "OFF" khawm tig nws.
4. Nyeem thiab pom zoo rau cov ntsiab lus.
5. Mus rau API console thiab xaiv "API Access" los ntawm daim ntawv qhia sab laug
6. Hauv seem "Simple API Access", nias qhov "Create New Server Key ..." khawm.
7. Sau tus IP chaw nyob ntawm koj lub web server. Qhov no yog qhov IP uas koj daim ntawv thov xa tawm yuav los ntawm. Yog tias koj tsis paub koj tus IP address, koj tuaj yeem saib nws.
8. Luam cov ntawv sau rau ntawm "API qhov tseem ceeb:" kab (tsis suav nrog lub npe). Nov yog koj qhov tseem ceeb API rau koj daim ntawv qhia.

02 ntawm 05

Hloov koj qhov chaw nyob rau kev sib koom tes

Yuav kom siv Google Maps hauv koj cov nplooj ntawv web, koj yuav tsum tau muaj lub siab thiab qhov ntev mus rau qhov chaw. Koj tuaj yeem tau txais cov no los ntawm GPS lossis koj tuaj yeem siv ib qho cuab yeej hauv online xws li Geocoder.us qhia rau koj.

1. Mus rau Geocoder.us thiab ntaus koj qhov chaw nyob hauv lub thawv nrhiav.
2. Luam thawj tus naj npawb rau sab latitude (tsis muaj daim ntawv tso rau pem hauv ntej) thiab muab nws tso rau hauv ib phau ntawv nyeem. Koj tsis tas yuav tsum muaj qhov ntsuas (º).
3. Luam thawj tus naj npawb rau qhov longitude (dua ib daim ntawv tso ua ntej) thiab muab tso rau hauv koj cov ntawv nyeem.

Koj lub koob thiab qhov ntev yuav saib zoo li no:

40.756076
-73.990838

Geocoder.us tsuas yog ua haujlwm rau Teb Chaws Asmeskas chaw nyob, yog tias koj xav tau cov hauj lwm hauv lwm lub teb chaws, koj yuav tsum nrhiav ib lub tswv yim zoo hauv koj thaj av.

03 ntawm 05

Muab Daim Ntawv Qhia Ntxiv rau Koj Qhov Web Page

Ua ntej, Ntxiv daim ntawv qhia rau daim ntawv

ntawm koj daim ntawv

Qhib koj cov nplooj ntawv web thiab ntxiv cov lus hauv qab no rau lub taub hau ntawm koj daim ntawv.

Hloov qhov tseem ceeb rau cov latitude thiab longitude tus naj npawb koj tau sau hauv kauj ruam ob.

Thib ob, Ntxiv daim ntawv qhia Element rau Koj Cov Page

Thaum koj muaj tag nrho cov ntawv sau ntxiv rau lub taub hau ntawm koj daim ntawv, koj yuav tsum tso koj daim ntawv qhia rau ntawm nplooj ntawv. Koj ua qhov no los ntawm kev ntxiv lub DIV caij nrog tus id = "map-canvas" attribute. Kuv xav kom koj tseem style no div nrog lub dav thiab qhov siab uas yuav haum rau ntawm koj nplooj:

Thaum kawg, Upload thiab Test

Qhov kawg yuav ua yog upload koj nplooj ntawv thiab kuaj koj daim ntawv qhia lus. Ntawm no yog ib qho piv txwv ntawm Google daim qhia kev hauv cov nplooj ntawv. Ceeb toom, vim txoj kev ua haujlwm hauv CMS.com, koj yuav tsum nias qhov txuas kom tau txais daim ntawv qhia kom pom. Qhov no yuav tsis yog rooj plaub ntawm koj daim ntawv.

Yog hais tias koj daim ntawv qhia tsis pom, sim ua kom pib nrog nws lub cev CIM:

onload = "initialize ()" >

Lwm yam yuav tau xyuas yog tias koj daim ntawv qhia tsis yog kev thauj khoom muaj xws li:

• Nrhiav typos hauv koj JavaScript, nrog rau cov ntaub ntawv. JavaScript yog case sensitive.
• Nco ntsoov hais tias koj muaj lub zoom thiab nruab nrab xaiv teeb.
• Nco ntsoov tias koj daim ntawv DIV yog nyob rau nplooj ntawv nrog tus ID tseeb.
• Nco ntsoov tias koj daim DIV muaj qhov siab.

04 ntawm 05

Ntxiv ib qho cim rau Koj Daim Qhia

Tab sis zoo li cas yog daim duab qhia ntawm koj qhov chaw nyob yog tias tsis muaj cov cim qhia txog cov neeg uas lawv yuav tsum mus?

Ntxiv ib daim qauv Google Maps xim liab ntxiv cov nram qab no rau koj cov ntawv hauv qab daim ntawv qhia bar ... = kab:

var myLatlng = tshiab google.maps.LatLng ( latitude, longitude );
var marker = tshiab google.maps.Marker ({
txoj haujlwm: myLatlng,
daim ntawv qhia: daim ntawv qhia,
title: " Yav dhau los About.com Lub Hauv Paus Pib "
});

Hloov cov ntawv nyeem tseem ceeb rau koj txoj kev ua siab ntev thiab qhov ntev thiab lub npe uas koj xav pom thaum neeg hover tshaj tus cim.

Koj tuaj yeem tau ntau lub cim rau ntawm nplooj ntawv raws li koj nyiam, ntxiv cov tshiab tshiab nrog lub koomhaum tshiab thiab lub npe, tab sis yog tias daim ntawv qhia no tsawg dhau los tso saib tag nrho cov cim, lawv yuav tsis qhia tshwj tsis yog tus nyeem ntawv zooms tawm.

var latlng 2 = tshiab google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = tshiab google.maps.Marker ({
txoj hauj lwm: latlng 2 ,
daim ntawv qhia: daim ntawv qhia,
title: " Kua Computer "
});

Ntawm no yog ib qho piv txwv ntawm Google daim duab qhia nrog tus cim kos npe. Ceeb toom, vim txoj kev ua haujlwm hauv CMS.com, koj yuav tsum nias qhov txuas kom tau txais daim ntawv qhia kom pom. Qhov no yuav tsis yog rooj plaub ntawm koj daim ntawv.

05 ntawm 05

Ntxiv ib Thib Ob (lossis Ntau Tshawb) Daim Ntawv Qhia Rau Nej

Yog tias koj tau saib kuv tus piv txwv Google cov nplooj ntawv koj yuav pom tias kuv muaj ntau tshaj ib daim ntawv qhia tshwm rau ntawm nplooj ntawv. Qhov no yooj yim heev ua. Nov yog li cas.

1. Tau lub latitude thiab longitude ntawm tag nrho cov duab uas koj xav mus tso saib thaum peb kawm hauv kauj ruam 2 ntawm no nyeem.
2. Ntxig daim ntawv qhia thawj zaug thaum peb kawm hauv kauj ruam 3 ntawm phau ntawv no. Yog tias koj xav tau daim qhia kev kom muaj tus cim, ntxiv rau tus cim raws li hauv kauj ruam 4.
3. Rau daim ntawv thib ob, koj yuav tsum tau ntxiv 3 cov kab tshiab rau koj daim ntawv thov initialize ():
   var latlng2 = tshiab google.maps.LatLng ( ob leeg tswj );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = tshiab google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Yog tias koj xav tau ib qho cim rau ntawm daim ntawv qhia tshiab dhau los, ntxiv ib qho ntxiv ob qho chaw taw qhia ntawm ob qhov chaw tswj thiab daim ntawv qhia thib ob:
   var myMarker2 = google.maps.Marker tshiab ({position: latlng2 , daim ntawv qhia: map2 , title: " Your Marker Title "});
5. Tom qab ntawd ntxiv ob

   qhov twg koj xav tau daim ntawv qhia thib ob. Thiab nco ntsoov muab nws tus id = "map_canvas_2" ID.

6. Thaum twg koj nplooj ntawv, ob daim duab yuav tso saib

Ntawm no yog cov cai ntawm nplooj ntawv nrog ob daim Google maps rau nws: