Mmene mungawonjezere Google Map ku Webusaiti Yanu

01 ya 05

Pezani Google Maps API Key pa Malo Anu

Njira yabwino yowonjezera mapu a Google pa webusaiti yanu ndi kugwiritsa ntchito Google Maps API. Ndipo Google akukulimbikitsani kuti mutenge maki API kuti mugwiritse ntchito mapu.

Simukufunikira kupeza chinsinsi cha API kuti mugwiritse ntchito Google Maps API v3, koma ndiwothandiza kwambiri pamene ikukuthandizani kufufuza momwe mukugwiritsira ntchito ndi kulipira kupeza zina. Google Maps API v3 ili ndi gawo la pempho la 1 pamphindi kwa wogwiritsa ntchito mpaka 25,000 zopempha tsiku lililonse. Ngati masamba anu akudutsa malire omwe muyenera kuwongolera kuti mupeze zambiri.

Momwe mungapezere Google Key API Key

1. Lowani ku Google pogwiritsa ntchito akaunti yanu ya Google.
2. Pitani ku Developers Console
3. Pezani mndandanda ndikupeza Google Maps API v3, ndipo dinani "OFF" kuti muyike.
4. Werengani ndi kuvomereza mawuwo.
5. Pitani ku API console ndipo sankhani "Access API" kuchokera kumanja
6. Mu gawo la "Simple API Access" gawo, dinani pa "Pangani batani watsopano ...".
7. Lowetsani adilesi ya IP ya seva yanu. Iyi ndi IP imene mapulogalamu anu a Maps adzachokera. Ngati simukudziwa IP adilesi yanu, mukhoza kuyang'ana.
8. Lembani mawuwo pa "API key:" mzere (osati kuphatikizapo dzina). Ichi ndichinsinsi chanu cha API pamapu anu.

02 ya 05

Sinthani Maadiresi Anu ku Makonzedwe

Kuti mugwiritse ntchito Google Maps pamasamba anu, muyenera kukhala ndi latitude ndi longitude kwa malo. Mutha kuwatenga ku GPS kapena mungagwiritse ntchito chida cha intaneti monga Geocoder.us kuti ndikuuzeni.

1. Pitani ku Geocoder.us ndipo lembani ku adilesi yanu mubokosi lofufuzira.
2. Lembani chiwerengero choyamba cha chilankhulo (popanda chilembo patsogolo) ndikuchiyika mu fayilo. Simukusowa chizindikiro cha (º).
3. Lembani chiwerengero choyamba chakum'mawa (kachiwiri popanda kalata kutsogolo) ndi kuziyika mu fayilo yanu ya malemba.

Ulalo ndi maulendo anu adzawoneka monga chonchi:

40.756076
-73.990838

Geocoder.us imagwira ntchito pa maadiresi a US, ngati mukufuna kupeza mgwirizanowu m'dziko lina, muyenera kufufuza chida chomwecho m'dera lanu.

03 a 05

Kuwonjezera Mapu ku Tsamba Lako Webusaiti

Choyamba, onjezani Mapu a Mapu kwa

Zamakalata Anu

Tsegulani tsamba lanu la intaneti ndi kuwonjezera zotsatirazi ku mutu wa chilemba chanu.

Sinthani gawo lofotokozedwa kuti likhale ndi chiwerengero cha maulendo ndi ma longitude omwe mwalemba mu sitepe iwiri.

Chachiwiri, onetsani Mapu a Mapu ku Tsamba Lanu

Mukadakhala ndi zolemba zonse zowonjezeredwa ku mutu wa chikalata chanu, muyenera kuyika mapu anu patsamba. Mukuchita izi mwa kuwonjezera chinthu cha DIV ndi chidziwitso cha "map-canvas". Ndikupatsaninso kuti mutanthauzire divichi ndi m'lifupi ndi kutalika komwe kudzagwirizana pa tsamba lanu:

Pomalizira, pangani ndi kuyesa

Chinthu chotsiriza ndichokweza tsamba lanu ndikuyesera mapu anu. Pano pali chitsanzo cha mapu a Google pa tsamba. Tawonani, chifukwa cha njira ya About.com CMS ikuthandizira, muyenera kudula chiyanjano kuti mapu awonekere. Izi sizidzakhala choncho pa tsamba lanu.

Ngati mapu sakuwonetseratu, yesani kuyambitsa ndi chikhalidwe cha BODY:

on load = "initialize ()" >

Zinthu zina zoti muwone ngati mapu sakukuphatikiza ndi awa:

• Fufuzani typos mu JavaScript, kuphatikizapo mlandu. JavaScript ndi yowopsa.
• Onetsetsani kuti muli ndi zokopa ndi zofunikira zomwe mungasankhe.
• Onetsetsani kuti chinthu chanu cha DIV chili pa tsamba ndi ID yolondola.
• Onetsetsani kuti DIV yanu ili ndi kutalika.

04 ya 05

Onjezani Chizindikiro pa Mapu Anu

Koma mapu a malo anu ndi abwino bwanji ngati palibe chizindikiro chouza anthu kumene ayenera kupita?

Kuwonjezera chizindikiro cha Google Maps wofiira kuwonjezera zotsatirazi palemba lanu pansi pa var map = ... line:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
udindo: myLatlng,
mapu: mapu,
Mutu: " Likulu Lakale la Near.com "
});

Sinthani malemba omwe awonetsedwa kumbali yanu ndi longitude ndi mutu womwe mukufuna kuti uwoneke pamene anthu akuyendetsa pamwamba pa chizindikiro.

Mukhoza kuwonjezera mapepala ambiri pamtundu momwe mukufunira, onjezerani zatsopano ndi zigawo zatsopano, koma ngati mapu ali aang'ono kwambiri kuti asawonetse chizindikiro chonse, sangawonetsedwe pokhapokha ngati wowerenga akuchotsa.

var latlng 2 = latsopano google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = latsopano google.maps.Marker ({
udindo: latlng 2 ,
mapu: mapu,
mutu: " Apple Computer "
});

Pano pali chitsanzo cha mapu a Google okhala ndi chizindikiro. Tawonani, chifukwa cha njira ya About.com CMS ntchito, muyenera dinani kulumikiza kuti mapu awonekere. Izi sizidzakhala choncho pa tsamba lanu.

05 ya 05

Onjezani Pachiwiri (kapena Zoonjezera) Mapu ku Tsamba Lanu

Ngati mwayang'ana pa tsamba langa la Google mapu mudzaona kuti ndili ndi mapu oposa umodzi omwe ali patsamba. Izi ndi zophweka kwambiri kuchita. Nazi momwemo.

1. Pezani maulendo ndi mapu a mapu onse omwe mukufuna kuwaonetsa monga momwe taphunzirira pa gawo 2 la phunziroli.
2. Ikani mapu oyambirira monga momwe taphunzirira mu gawo lachitatu la phunziroli. Ngati mukufuna kuti mapu akhale ndi chizindikiro, onjezerani chizindikiro ngati gawo 4.
3. Pa mapu achiwiri, muyenera kuwonjezera mizere yatsopano 3 (initially):
   var latlng2 = new google.maps.LatLng (makalata achiwiri );
   var myOptions2 = {zojambula: 18, pakati: latlng2, mapuTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ngati mukufuna chizindikiro pa mapu atsopano, onjezerani chikhomo chachiwiri chikuwonetsa pazotsatira zachiwiri ndi mapu achiwiri:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , mapu: map2 , mutu: " Malipiro Anu "});
5. Kenaka yonjezerani yachiwiri

   kumene mukufuna mapu achiwiri. Ndipo onetsetsani kuti mupatseni id = "map_canvas_2" ID.

6. Pamene tsamba lanu likutsika, mapu awiri adzawonetsedwa

Pano pali code ya tsamba ndi mapu awiri a Google pa izo: