Kuidas lisada Google Map oma veebilehele

01, 05

Saage oma saidi Google Mapsi API-võtme

Parim viis oma veebisaidile Google'i kaardi lisamiseks on kasutada Google Mapsi API-d. Ja Google soovitab teil saada kaartide kasutamiseks API-võtme.

Google Maps API v3 kasutamiseks ei pea te API-võtme saamiseks kasutama, kuid see on väga kasulik, kuna see võimaldab teil oma kasutust jälgida ja maksta täiendava juurdepääsu eest. Google Mapsi API-versioonil 3 on kasutaja soovil 1 taotluse sekundis, maksimaalselt 25 000 päringut päevas. Kui teie lehed ületavad neid piiranguid, peate arvelduse lubama, et saada rohkem.

Kuidas saada Google Mapsi API võtme?

1. Logige Google'i sisse oma Google'i konto abil.
2. Minge arendajakonsoolile
3. Sirvige loendit ja leidke Google Mapsi API v3, seejärel klõpsake selle sisselülitamiseks nuppu "VÄLJAS".
4. Loe tingimusi ja nõustuge nendega.
5. Minge API-konsooli ja valige vasakpoolses menüüs "API-juurdepääs"
6. Klõpsake jaotises "Antud API-liides" nuppu "Loo uus serveri ...".
7. Sisestage oma veebiserveri IP-aadress. See on IP, kust teie Mapsi päringud tulevad. Kui te ei tea oma IP-aadressi, võite seda vaadata.
8. Kopeerige tekst rida "API-võti:" (välja arvatud see pealkiri). See on teie kaartide jaoks teie API-võti.

02 of 05

Konverteeri oma aadressi koordinaatidele

Google Mapsi kasutamiseks oma veebilehtedel peab teil olema asukoha laius ja pikkuskraad. Saate neid saada GPS-ist või saate kasutada seda veebipõhist tööriista nagu Geocoder.us, et teile öelda.

1. Minge Geocoder.us ja sisestage oma aadress otsingukasti.
2. Kopeeri laiuskraadi esimene number (ilma kirjaga ees) ja kleepige see tekstifaili. Teil pole vaja kraadi (º) indikaatorit.
3. Kopeeri pikkuskraadi esimene number (jälle ilma kirjaga ees) ja kleepige see oma tekstifaili.

Teie laius- ja pikkuskraad näeb välja selline:

40.756076
-73,990838

Geocoder.us toimib ainult USA aadresside jaoks, kui peate teise riigi koordinaate saama, peaksite oma piirkonnas otsima sarnast tööriista.

03 of 05

Kaart lisamine veebi lehele

Esiteks lisage kaardiskript

teie dokumendist

Avage oma veebileht ja lisage oma dokumendi HEAD.

Muutke esile tõstetud osa laius- ja pikkuskraadi numbritele, mille olete teises etapis salvestanud.

Teiseks lisage oma lehele kaardielement

Kui kõik dokumendi HEAD-ile lisatud skripti elemendid on lisatud, peate oma kaardi paigutama lehele. Seda teete, lisades DIV-elemendi atribuudi id = "map-canvas". Ma soovitan ka stiilida seda divi laiusega ja kõrgusega, mis sobib teie lehele:

Lõpuks laadige üles ja proovige

Viimane asi, mida teha, on oma lehe üleslaadimine ja selle kaardi näitamine. Siin on näide Google'i kaardist lehel. Pange tähele, kuna About.com CMS töötab, peate klõpsama kaardil ilmumise kuvamiseks linki. See ei kehti teie lehel.

Kui teie kaarti ei kuvata, proovige seda initsialiseerida BODY atribuudiga:

onload = "initsialiseerida ()" >

Muud asjad, mis kontrollivad, kas teie kaarti ei laadita, on järgmised:

• Otsige JavaScriptis olevaid tõrkeid, kaasa arvatud juhul. JavaScript on tõstutundlik.
• Veenduge, et teil oleks suumi ja keskmise valikute seade.
• Veenduge, et teie DIV-element on lehel õige ID-ga.
• Veenduge, et teie DIV elemendil on pikkus.

04 05

Lisage oma kaardile marker

Kuid mis on hea teie asukoha kaart, kui pole märki, mis ütleks inimestele, kuhu nad peaksid minema?

Standardse Google Mapsi punase märgi lisamiseks lisage skriptile alljärgnevalt var kaardi = ... rida:

var myLatlng = uus google.maps.LatLng ( laiuskraad, pikkuskraad );
var marker = uus google.maps.Marker ({
asukoht: myLatlng
kaart: kaart
pealkiri: " Endine .ee.fi peakorter "
});

Muutke esiletõstetud tekst oma laius- ja pikkuskraadile ja pealkirjale, mida soovite kuvada, kui inimesed kursorist üle markeri.

Saate oma lehele lisada nii palju märksõnu kui lisate uusi muutujaid uute koordinaatide ja pealkirjadega, kuid kui kaart on kõigi markerite kuvamiseks liiga väike, siis neid ei näidata, kui lugeja ei suuda välja tuua.

var latlng 2 = uus google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = uus google.maps.Marker ({
asukoht: latlng 2
kaart: kaart
pealkiri: " Apple Computer "
});

Siin on näiteks Google'i kaart markeriga. Pidage meeles, et Why.com CMS töötab, et klõpsata kaardil kuvamiseks lingil. See ei kehti teie lehel.

05 05

Lisage oma lehele teine ​​(või rohkem) kaart

Kui olete oma näite Google Mapsi lehel näinud, näete, et mul on lehel kuvatud rohkem kui üks kaart. Seda on väga lihtne teha. Siin on kuidas.

1. Hankige kõigi kaartide pikkus- ja pikkuskraad, mida soovite kuvada, nagu õppisime selle juhendaja 2. sammul.
2. Sisestage esimene kaart, nagu me õppisime selle juhendaja 3. sammul. Kui soovite, et kaardil oleks marker, lisage marker nagu punktis 4.
3. Teise kaardi jaoks peate oma initsialiseerimiseks () skripti lisama 3 uut rida:
   var latlng2 = uus google.maps.LatLng ( teine ​​koordinaat );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = uus google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Kui soovite ka uue kaardi markeri lisada, lisage teine ​​märk teise koordinaatide ja teise kaardi juurde:
   var myMarker2 = uus google.maps.Marker ({position: latlng2 , map: map2 , pealkiri: " teie markeri pealkiri "});
5. Seejärel lisa teine

   kus soovite teise kaardi. Anduta kindlasti selle id = "map_canvas_2" ID.

6. Kui teie leht laadib, kuvatakse kaks kaarti

Siin on kahe Google'i kaardi lehe kood: