Hvernig á að bæta Google kort við vefsíðuna þína

01 af 05

Fáðu lykilorð fyrir Google kort fyrir vefsvæðið þitt

Besta leiðin til að bæta Google kort við vefsvæðið þitt er að nota Google Maps API. Og Google mælir með því að þú hafir API lykil til að nota kortin.

Þú þarft ekki að fá API-lykil til að nota Google Maps API v3, en það er mjög gagnlegt þar sem það leyfir þér að fylgjast með notkun þinni og borga fyrir frekari aðgang. Google Maps API v3 hefur kvóta af 1 beiðni á sekúndu á hvern notanda að hámarki 25.000 beiðnir á dag. Ef síðurnar þínar fara yfir þessi mörk þarftu að virkja innheimtu til að fá meira.

Hvernig á að fá API lykil fyrir Google kort

1. Skráðu þig inn á Google með Google reikningnum þínum.
2. Farðu í hönnuðaþjóninn
3. Skrunaðu í gegnum listann og finndu API forritið fyrir Google kort v3 og smelltu svo á "OFF" hnappinn til að kveikja á henni.
4. Lesið og samþykkið skilmálana.
5. Farðu í hugbúnaðinn á forritaskilum og veldu "Aðgangsstillingar" í vinstri valmyndinni
6. Í hlutanum "Einföld API aðgang" smellirðu á "Búa til nýjan miðlara takka ..." hnappinn.
7. Sláðu inn IP tölu vefþjón þinnar. Þetta er IP þar sem beiðnir þínar munu koma frá. Ef þú þekkir ekki IP-tölu þína getur þú skoðað það.
8. Afritaðu textann á "API lykil:" lína (ekki með þessum titli). Þetta er API lykill fyrir kortin þín.

02 af 05

Breyta netfanginu þínu við hnit

Til að nota Google kort á vefsíðum þínum þarftu að hafa breiddar- og lengdargráðu fyrir staðsetningu. Þú getur fengið þetta frá GPS eða þú getur notað netverkfæri eins og Geocoder.us til að segja þér.

1. Farðu í Geocoder.us og sláðu inn netfangið þitt í leitarreitnum.
2. Afritaðu fyrsta númerið fyrir breiddarhornið (án bréfs fyrir framan) og límdu það í textaskrá. Þú þarft ekki gráðu (º) vísirinn.
3. Afritaðu fyrsta númerið fyrir lengdargráðu (aftur án bréfs fyrir framan) og límdu það í textaskrá.

Breiddargráðu og lengdargráðu mun líta svona út:

40,756076
-73.990838

Geocoder.us virkar aðeins fyrir US vistföng, ef þú þarft að fá hnit í öðru landi, ættir þú að leita að svipuðum tólum á þínu svæði.

03 af 05

Bæti kortinu við vefsíðuna þína

Í fyrsta lagi skaltu bæta kortaskriftunni við

af skjalinu þínu

Opnaðu vefsíðu þína og bættu eftirfarandi við höfuðið á skjalinu þínu.

Breyttu hápunktinum í breiddar- og lengdargráðu númerunum sem þú skrifaðir niður í þrepi tvö.

Í öðru lagi, bætið kortagreininni við síðuna þína

Þegar þú hefur öll forskriftareiningarnar bætt við HEAD skjalsins þarftu að stilla kortið þitt á síðunni. Þú gerir þetta með því að bæta við DIV frumefni með id = "map-canvas" eiginleiki. Ég mæli með að þú stíll þessa div með breidd og hæð sem passar á síðuna þína:

Að lokum, Hlaða upp og prófa

Það síðasta sem þarf að gera er að hlaða inn síðunni og prófa að kortið birtist. Hér er dæmi um Google kort á síðunni. Athugaðu, vegna þess hvernig CMS virkar, þá verður þú að smella á tengil til að fá kortið til að birtast. Þetta mun ekki vera raunin á síðunni þinni.

Ef kortið þitt birtist ekki skaltu reyna að hefja það með BODY eiginleiki:

onload = "frumstilla ()" >

Aðrir hlutir til að athuga hvort kortið þitt er ekki að hlaða inn eru:

• Leitaðu að typos í JavaScript, þar á meðal tilfelli. JavaScript er málmengandi.
• Gakktu úr skugga um að þú hafir stillingar fyrir aðdrátt og miðju.
• Gakktu úr skugga um að DIV þátturinn þinn sé á síðunni með réttu auðkenni.
• Gakktu úr skugga um að DIV frumefni þín hafi hæð.

04 af 05

Bættu við merkjum á kortið þitt

En hvað gott er kort af staðsetningu þinni ef það er engin merki sem segir fólki hvar þeir ættu að fara?

Til að bæta við venjulegum Google kortum rauðum merkjum skaltu bæta við eftirfarandi við handritið þitt undir vörulistanum = ... lína:

var myLatlng = nýtt google.maps.LatLng ( breiddargráða, lengdargráða );
var merki = nýtt google.maps.Marker ({
staða: myLatlng,
kort: kort,
titill: " Former About.com Headquarters "
});

Breyttu hápunktur textans á breiddar- og lengdargráðu og titlinum sem þú vilt birtast þegar fólk sveima yfir merkið.

Þú getur bætt við eins mörg merkjum við síðuna eins og þú vilt, bara bæta við nýjar breytur með nýjum hnitum og titlum, en ef kortið er of lítið til að birta alla merkið, þá munu þau ekki birtast nema lesandinn dreyma út.

var latlng 2 = nýtt google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nýtt google.maps.Marker ({
stöðu: latlng 2 ,
kort: kort,
titill: " Apple Computer "
});

Hér er dæmi um Google kort með merki. Athugaðu, vegna þess hvernig CMS virkar, þá verður þú að smella á tengil til að fá kortið til að birtast. Þetta mun ekki vera raunin á síðunni þinni.

05 af 05

Bættu öðru (eða fleiri) korti við síðuna þína

Ef þú hefur skoðað kortið á Google kortinu þínu munðu taka eftir því að ég hef fleiri en eitt kort sem birtist á síðunni. Þetta er mjög auðvelt að gera. Hér er hvernig.

1. Fáðu breiddargráðu og lengdargráðu allra korta sem þú vilt birta eins og við lærðum í skrefi 2 í þessari kennsluefni.
2. Settu inn fyrsta kortið eins og við lærðum í skrefi 3 í þessari kennsluefni. Ef þú vilt að kortið sé með merki skaltu bæta við merkinu eins og í skrefi 4.
3. Fyrir annað kortið þarftu að bæta 3 nýjum línum við frumstilla () handritið þitt:
   var latlng2 = nýtt google.maps.LatLng ( annar hnit );
   var myOptions2 = {zoom: 18, miðstöð: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = nýtt google.mapsMap (document.getElementById ("map_canvas_2"), myOptions2);
4. Ef þú vilt líka fá merki á nýju kortinu skaltu bæta við öðru merkinu sem bendir á aðra hnit og annað kortið:
   var myMarker2 = nýtt google.maps.Marker ({staða: latlng2 , kort: map2 , titill: " Your Marker Title "});
5. Þá bæta við öðru

   þar sem þú vilt annað kortið. Og vertu viss um að gefa það ID = "map_canvas_2" ID.

6. Þegar blaðsíðan þín er hlaðið verða tveir kort birtar

Hér er kóðinn á síðu með tveimur Google kortum á henni: