Nzira yekuwedzera nayo Google Map kuIndaneti Yenyu

01 ye 05

Tora Google Maps API Key yeWebsite Yako

Nzira yakanakisisa yokuwedzera mapu eGoogle kune webhusaiti yako ndeyokushandisa Google Maps API. Uye Google inokurudzira kuti uwane kiyi ye API kuitira kushandisa mapepa.

Iwe hauna kutarisirwa kuwana kechi API kushandisa Google Maps API v3, asi inobatsira sezvo inokubvumira kuti uone kushandiswa kwako uye ubhadhara kuwedzerwa kwekuwedzerwa. Google Maps API v3 ine chikamu chechikumbiro 1 pamusi wechipiri kuburikidza nomushandi kusvika kune makumi maviri nezviviri zvekumbira pazuva. Kana mapeji ako achipfuura nemiganhu iyo iwe uchada kubhadhara kubhadhara kuitira kuti uwane zvakawanda.

Nzira yekuwana nayo Google Maps API Key

1. Pinda paGoogle uchishandisa gwaro reGoogle.
2. Endai kune Developers Console
3. Bhura nepakati peurongwa uye uwane Google Maps API v3, uye chengetera "OFF" pakushandura.
4. Verenga uye bvumirana nemashoko.
5. Endai ku API console uye sarudza "API Access" kubva kuruboshwe
6. Mu "Simple API Access" chikamu, chengetera pa "Shandisa mushandisi wekuvhara ...".
7. Pinda paIndaneti ye web server yako. Iyi ndiyo IP iyo mapikicha ako eMapu achave achibva. Kana iwe usingazivi IP address yako, unogona kuzvitarisa.
8. Nyora rugwaro rwe "API key:" line (kwete kusanganisira iyo zita). Iyi ndiyo mhizha yako API yemakuta ako.

02 of 05

Shandura Mazita Ako kuCorodates

Kuti ushandise Google Maps pamapeji ako ewebhu, unoda kuva nechokure uye longitude kune nzvimbo. Iwe unogona kuwana izvi kubva paGPS kana unogona kushandisa shanduro yeIndaneti seGeocoder.us kukuudza.

1. Enda kuGeocoder.us uye nyora pakero yako mubhokisi rekutsvaga.
2. Kopa nhamba yokutanga yehupamhi (pasina tsamba iri mberi) uye kuisungira mumagwaro mafaira. Iwe haunoda chidimbu (º) chidimbu.
3. Kopa nhamba yokutanga yechokureta (zvakare isina tsamba pamberi) uye uiise mumagwaro ako.

Kodzero yako nechokumabvazuva zvichaona chimwe chinhu chakadai:

40.756076
-73.990838

Geocoder.us inoshanda chete kuUnited States, kana uchida kuwana hurumende kune imwe nyika, unofanira kutsvaga chimbo chakafanana munzvimbo yako.

03 of 05

Kuwedzera Mepu kuIndaneti Yenyu Yepamusoro

Kutanga, Wedzera Map Map Script kune

yeWe Document

Vhura webhu rako peji uye uwedzere zvinotevera ku HEAD yedhadhi rako.

Shandura chikamu chakasimbiswa kusvika kumakero ehupamhi nechokumucheto wakanyora pasi muchikamu zviviri.

Chechipiri, Wedzera Mepu Element ku Peji Yenyu

Kana uchinge uine zvinhu zvose zvinyorwa zvinowanikwa ku HEAD yedhipatimendi rako, unofanirwa kuisa mapepa ako peji. Iwe unoita izvi nekuwedzera DIV chinhu ne id = "mapu-tambo" maitiro. Ndinokurudzira iwe zvakare utaure iyi div nehupamhi uye hurefu huchakodzera paji rako:

Pakupedzisira, Pakera nekuedzwa

Chinhu chokupedzisira chaunofanira kuita ndechokuisa peji rako uye kuedza kuti mepu yako inoratidza. Heino muenzaniso wemepu yeGoogle pane peji. Cherechedza, nekuda kwenzira iyo About.com CMS inoshanda, iwe unofanira kutora chibvumirano kuitira kuti mapeji aonekwe. Izvi hazvisi kuzoitika pane peji rako.

Kana mepu yako isingaratidzi, edza kutanga nayo nehuwandu hweBODY:

onload = "kutanga ()" >

Zvimwe zvinhu kuti uone kana mepu yako isinganisi inosanganisira:

• Tsvaga zvinyorwa muJavaScript yako, kusanganisira nyaya. JavaScript is case sensitive.
• Iva nechokwadi chokuti une zoom uye yepakati zvasarudzo zvasarudzwa.
• Iva nechokwadi chokuti DIV yako chinhu chiri papeji uye neIndaneti yakarurama.
• Iva nechokwadi chokuti DIV yako inenge yakakwirira.

04 of 05

Wedzera Chiratidzo kuMepu Yako

Asi mepu yakanaka yei nzvimbo yako kana pasina chiratidzo chinoudza vanhu kwavanofanira kuenda?

Kuti uwedzere mufananidzo weGoogle Maps red mark kuwedzera zvinotevera kumagwaro ako pasi pevar var = = line:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
nzvimbo: myLatlng,
mapa: map,
chinyorwa: " Wekare About About.com Headquarters "
});

Shandura mharidzo yakasimudzirwa kusvika kumuganhu wako nechokuita uye chinyorwa chaunoda kuonekwa apo vanhu vanofambisa pamusoro pemuvara.

Iwe unogona kuwedzera sezvikwangwani zvakawanda papeji sezvaunoda, kungowedzera zvitsva zvitsva nemigatanidzwa mitsva nemazita, asi kana mepu isiri duku kudarika mavara ose, haazoratidzi kunze kwekunge muverengi akasika.

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

Heino muenzaniso wemepu yeGoogle ine marker. Cherechedza, nekuda kwenzira iyo About.com CMS inoshanda, unofanira kutora chibatanidzwa kuti upe mapeji kuti aoneke. Izvi hazvisi kuzoitika pane peji rako.

05 of 05

Wedzera Chipiri (kana Zvimwe) Mepu kune Peji Yenyu

Kana iwe wakatarisa mhando yangu yeGoogle mapeji peji iwe uchaona kuti ndine mapeji anopfuura rimwe akaratidzwa papeji. Izvi zviri nyore chaizvo kuita. Heino nzira.

1. Wana ruzivo uye nzvimbo yemamamephu ose waunoda kuratidzira sezvatakadzidza muchikamu chechipiri chekudzidzisa.
2. Isa mepu yekutanga sezvatakadzidza muchikamu chechitatu chekudzidzisa. Kana iwe uchida kuti mepu ive nechiratidzo, wedzera mucherecheri sechishanu.
3. Nokuda kwepupu yechipiri, iwe unofanira kuwedzera mitsara 3 mutsva yako kutanga () script:
   var latlng2 = new google.maps.LatLng ( yechipiri mazano );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Kana iwe uchida kuisa chiratidzo pamapupa matsva zvakare, wedzera chipiri chechipiri chinotarisa pamakiratiro echipiri uye mapeji echipiri:
   var myMarker2 = new google.maps.Marker ({nzvimbo: latlng2 , mapa: map2 , musoro: " Yako Marker Title "});
5. Zvadaro wedzera wechipiri

   apo iwe unoda mapu wechipiri. Uye iva nechokwadi chekupa id = "map_canvas_2" ID.

6. Apo peji rako rinotakura, mapepa maviri acharatidza

Heino purogiramu ye peji ine maGoogle mapaundi maviri pairi: