Kif Żid Google Map fuq il-Web Page Tiegħek

01 ta '05

Ikseb il-Key API ta 'Google Maps għas-sit tiegħek

L-aħjar mod biex iżżid mappa ta 'Google mal-websajt tiegħek huwa li tuża Google Maps API. U Google jirrakkomanda li tikseb ċavetta API sabiex tuża l-mapep.

M'intix meħtieġ li tikseb ċavetta ta 'l-API biex tuża Google Maps API v3, iżda hija utli ħafna peress li tħallik timmonitorja l-użu tiegħek u tħallas għal aċċess addizzjonali. Google Maps API v3 għandha kwota ta '1 talba kull sekonda għal kull utent għal massimu ta' 25,000 talba kuljum. Jekk il-paġni tiegħek jaqbżu dawk il-limiti ser ikollok bżonn li jippermettu l-kontijiet sabiex tikseb aktar.

Kif tikseb Key API Google Maps

1. Ibda l-Google billi tuża l-kont tal-Google tiegħek.
2. Mur fil-Developers Console
3. Skopri l-lista u ssib il-Google Maps API v3, imbagħad ikklikkja fuq il-buttuna "OFF" biex taqbadha.
4. Aqra u taqbel mat-termini.
5. Mur fil-console APIs u agħżel "Aċċess API" mill-menu tax-xellug
6. Fit-taqsima "Sempliċi Aċċess għall-API", ikklikkja fuq il-buttuna "Oħloq Key Server ġdid ...".
7. Daħħal l-indirizz IP tal-web server tiegħek. Din hija l-PI fejn se jkunu ġejjin it-talbiet tal-Mapep tiegħek. Jekk ma tafx l-indirizz IP tiegħek, tista 'tfittex it up.
8. Kopja tat-test fuq il-linja "ċavetta API": (mhux inkluż dak it-titlu). Din hija ċ-ċavetta API tiegħek għal mapep tiegħek.

02 ta '05

Ikkonverti l-Indirizz tiegħek għal Koordinati

Sabiex tuża Google Maps fuq il-paġni tal-web tiegħek, jeħtieġ li jkollok il-latitudni u l-lonġitudni għall-post. Tista 'tikseb dawn minn GPS jew tista' tuża għodda onlajn bħal Geocoder.us biex jgħidlek.

1. Mur fil-Geocoder.us u fit-tip fl-indirizz tiegħek fil-kaxxa tat-tfittxija.
2. Ikkopja l-ewwel numru għal-latitudni (mingħajr ittra fuq quddiem) u paste fil-fajl tat-test. M'għandekx bżonn l-indikatur tal-grad (º).
3. Ikkopja l-ewwel numru għall-lonġitudni (għal darb'oħra mingħajr ittra fuq quddiem) u paste fil-fajl tat-test tiegħek.

Il-latitudni u l-lonġitudni tiegħek ser tħares xi ħaġa bħal din:

40.756076
-73.990838

Geocoder.us jaħdem biss għall-indirizzi tal-Istati Uniti, jekk għandek bżonn tikseb il-koordinati f'pajjiż ieħor, għandek tfittex għodda simili fir-reġjun tiegħek.

03 ta '05

Żieda tal-Mappa mal-Paġna tal-Web Tiegħek

L-ewwel, Żid il-Map Script għall-

tad-Dokument Tiegħek

Iftaħ il-paġna web tiegħek u żid dan li ġej mal-HEAD tad-dokument tiegħek.

Ibdel il-porzjon enfasizzat għal-numri ta 'latitudni u lonġitudni li kiteb fil-pass tnejn.

It-tieni, Żid l-Element tal-Mappa għall-Paġna tiegħek

Ladarba jkollok l-elementi kollha tal-iskritt miżjuda mal-HEAD tad-dokument tiegħek, għandek bżonn tqiegħed il-mappa tiegħek fuq il-paġna. Tista 'tagħmel dan billi żżid element DIV bl-id = "map-canvas" attribut. Nirrakkomanda li inti wkoll stil din div bil-wisa 'u l-għoli li se joqogħdu fuq il-paġna tiegħek:

Fl-aħħarnett, Upload u Test

L-aħħar ħaġa li għandek tagħmel hi ttella 'l-paġna tiegħek u tittestja li turi l-mappa tiegħek. Hawn hu eżempju ta 'mappa ta' Google fuq il-paġna. Innota, minħabba l-mod kif taħdem is-CMS ta 'About.com, ikollok tikklikkja link biex tikseb il-mappa tidher. Dan mhux se jkun il-każ fil-paġna tiegħek.

Jekk il-mappa tiegħek ma tidhirx, ipprova tinstallaha b'attribut BODY:

onload = "initialize ()" >

Oġġetti oħra biex jiċċekkjaw jekk il-mappa tiegħek mhix tagħbija jinkludu:

• Fittex typos fil-JavaScript tiegħek, inkluż il-każ. JavaScript huwa sensittiv għall-każijiet.
• Kun żgur li jkollok l-għażliet ta 'zoom u ċentru stabbiliti.
• Kun żgur li l-element DIV tiegħek jinsab fuq il-paġna bl-ID korrett.
• Kun żgur li l-element DIV tiegħek għandu għoli.

04 ta '05

Żid Marker fuq il-mappa tiegħek

Imma dak li hu tajjeb huwa mappa tal-lokalità tiegħek jekk ma jkun hemm l-ebda markatur li javżak lin-nies fejn għandhom imorru?

Biex iżżid markatur aħmar standard Google Maps żid dan li ġej ma 'l-iskritt tiegħek taħt il-mappa var = ... linja:

var myLatlng = google.maps.LatLng ġdid ( latitudni, lonġitudni );
var marker = google.maps.Marker ġdid ({
pożizzjoni: myLatlng,
mappa: mappa,
Titolu: " Eks Kwartieri Ġenerali ta 'Dixx.Internet "
});

Ibdel it-test enfasizzat fuq il-latitudni u l-lonġitudni tiegħek u t-titlu li tixtieq tidher meta n-nies imorru fuq il-markatur.

Tista 'żżid bosta markaturi mal-paġna kif tixtieq, żid varjabbli ġodda b'koordinati u titoli ġodda, imma jekk il-mappa hija żgħira wisq biex turi l-markaturi kollha, dawn mhux se juru sakemm il-qarrej ma jżidx.

var latlng 2 = ġodda google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker ġdid ({
pożizzjoni: latlng 2 ,
mappa: mappa,
titolu: " Apple Computer "
});

Hawn hu eżempju ta 'mappa tal-Google b'marka. Innota, minħabba l-mod kif taħdem is-CMS About.com, għandek tikklikkja link biex tikseb il-mappa tidher. Dan mhux se jkun il-każ fil-paġna tiegħek.

05 ta '05

Żid It-Tieni (jew Aktar) Mappa għall-Paġna tiegħek

Jekk ħares lejn l-eżempju tiegħi paġna tal-mapep Google tinduna li għandi aktar minn mappa waħda murija fuq il-paġna. Dan huwa faċli ħafna li tagħmel. Hawn kif.

1. Niżżel il-latitudni u l-lonġitudni tal-mapep kollha li trid turi kif tgħallimna fil-pass 2 ta 'dan it-tutorial.
2. Daħħal l-ewwel mappa kif tgħallimna fil-pass 3 ta 'dan tutorja. Jekk trid li l-mappa jkollha marka, żid il-markatur bħal fil-pass 4.
3. Għat-tieni mappa, ser ikollok bżonn iżżid 3 linji ġodda mal-kitba inizjali () tiegħek:
   var latlng2 = ġodda google.maps.LatLng ( it-tieni koordinati );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = google.maps.Map ġdid (dokument.getElementById ("map_canvas_2"), myOptions2);
4. Jekk trid ukoll markatur fuq il-mappa l-ġdida, żid it-tieni indikatur li jindika fit-tieni koordinati u t-tieni mappa:
   var myMarker2 = google.maps.Marker ġdid ({pożizzjoni: latlng2 , mappa: map2 , titlu: " Titlu tal-Marker Tiegħek "});
5. Imbagħad żid it-tieni

   fejn trid it-tieni mappa. U kun żgur li tagħtiha ID = "map_canvas_2" ID.

6. Meta tagħfas il-paġna tiegħek, se juri żewġ mapep

Hawn hu l-kodiċi ta 'paġna b'żewġ mapep Google fuqha: