Ako pridať mapu Google na svoju webovú stránku

01 z 05

Získajte kľúč API služby Google Maps pre vaše stránky

Najlepším spôsobom, ako pridať mapu Google na vaše webové stránky, je použiť rozhranie API služby Mapy Google. Spoločnosť Google odporúča, aby ste získali kľúč API na používanie máp.

Nie je potrebné získať kľúč rozhrania API na používanie služby API služby Google Maps v3, ale je to veľmi užitočné, pretože umožňuje sledovať používanie a zaplatiť za ďalší prístup. Aplikácia Google Maps API v3 má kvótu 1 žiadosť za sekundu na používateľa na maximálne 25 000 žiadostí denne. Ak vaše stránky prekročia tieto limity, musíte povoliť fakturáciu, aby ste získali viac.

Ako získať kľúč API služby Mapy Google

1. Prihláste sa do služby Google pomocou svojho účtu Google.
2. Prejdite do Konzoly pre vývojárov
3. Prejdite zoznamom a nájdite API služby Google Maps v3 a potom ho stlačením tlačidla "OFF" vypnite.
4. Prečítajte si a súhlaste s podmienkami.
5. Prejdite na konzolu rozhrania API a v ľavej ponuke vyberte možnosť Prístup API
6. V sekcii Jednoduchý prístup API kliknite na tlačidlo "Vytvoriť nové tlačidlo servera ...".
7. Zadajte adresu IP vášho webového servera. Toto je IP, odkiaľ pochádzajú vaše požiadavky v službe Mapy. Ak nepoznáte svoju adresu IP, môžete ju vyhľadať.
8. Skopírujte text na riadok "API kľúč:" (bez názvu). Toto je váš kľúč rozhrania API pre vaše mapy.

02 z 05

Preveďte svoju adresu na súradnice

Ak chcete používať službu Mapy Google na vašich webových stránkach, musíte mať geografickú zemepisnú šírku a dĺžku. Môžete ich získať z GPS alebo môžete použiť on-line nástroj, ako je Geocoder.us, aby vám to povedal.

1. Prejdite na položku Geocoder.us a zadajte svoju adresu do vyhľadávacieho poľa.
2. Skopírujte prvé číslo pre zemepisnú šírku (bez písmena vpredu) a prilepte ho do textového súboru. Nepotrebujete ukazovateľ stupňa (º).
3. Skopírujte prvé číslo pre dĺžku (opäť bez písmena vpredu) a vložte ho do textového súboru.

Vaša zemepisná šírka a dĺžka bude vyzerať takto:

40.756076
-73,990838

Geocoder.us funguje iba pre americké adresy, ak potrebujete získať súradnice v inej krajine, mali by ste vyhľadávať podobný nástroj vo vašom regióne.

03 z 05

Pridanie mapy na vašu webovú stránku

Najskôr pridajte mapový skript do priečinka

vášho dokumentu

Otvorte svoju webovú stránku a pridajte nasledujúce informácie do hlavičky dokumentu.

Zmeňte zvýraznenú časť na čísla zemepisnej šírky a dĺžky, ktoré ste si zapísali v druhom kroku.

Po druhé, pridajte element mapy na svoju stránku

Akonáhle máte všetky prvky skriptu pridané do hlavičky dokumentu, musíte umiestniť svoju mapu na stránku. To urobíte pridaním prvku DIV s atribútom id = "map-canvas". Odporúčam vám tiež štýl tejto div s šírkou a výškou, ktoré sa hodia na vašu stránku:

Nakoniec odovzdajte a otestujte

Posledná vec, ktorú musíte urobiť, je nahrať svoju stránku a otestovať, či sa vaša mapa zobrazuje. Tu je príklad mapy Google na stránke. Všimnite si, že kvôli spôsobu, akým funguje CMS About.com, budete musieť kliknúť na odkaz, aby sa mapa zobrazila. Toto sa na vašej stránke nestane.

Ak sa vaša mapa nezobrazí, skúste ju inicializovať pomocou atribútu BODY:

onload = "inicializovať ()" >

Ďalšie informácie, či vaša mapa nie je načítaná:

• Vyhľadajte nápisy vo vašom jazyku JavaScript vrátane prípadu. JavaScript je citlivý na veľkosť písmen.
• Uistite sa, že máte nastavené možnosti priblíženia a stredu.
• Uistite sa, že váš prvok DIV je na stránke so správnym ID.
• Uistite sa, že váš prvok DIV má výšku.

04 z 05

Pridať značku na svoju mapu

Ale aké je dobré umiestnenie vašej lokality, ak neexistuje žiadna značka, ktorá by ľuďom povedala, kam by mali ísť?

Ak chcete pridať štandardnú červenú značku služby Google Maps, pridajte do skriptu nasledujúci text pod var var = = line:

var myLatlng = nový google.maps.LatLng ( zemepisná šírka, zemepisná dĺžka );
var marker = nový google.maps.Marker ({
pozícia: myLatlng,
mapa: mapa,
názov: " bývalý hlavný štýl "
});

Zmeňte zvýraznený text na zemepisnú šírku a zemepisnú dĺžku a názov, ktorý chcete zobraziť, keď ľudia umiestnia kurzor na značku.

Môžete pridať do stránky toľko značiek, stačí pridať nové premenné s novými súradnicami a názvami, ale ak je mapa príliš malá na zobrazenie všetkých značiek, nezobrazia sa, ak sa čítačka nerozlišuje.

var latlng 2 = nový google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nový google.maps.Marker ({
pozícia: latlng 2 ,
mapa: mapa,
názov: " Apple Computer "
});

Tu je príklad mapy Google s označením. Všimnite si, že kvôli spôsobu, akým funguje CMS About.com, musíte kliknúť na odkaz, aby sa mapa zobrazila. Toto sa na vašej stránke nestane.

05 z 05

Pridajte druhú (alebo viac) mapu na svoju stránku

Ak ste sa pozreli na moju príkladovú stránku Google mapy, všimnete si, že na stránke sa zobrazuje viac ako jedna mapa. To je veľmi jednoduché. Tu je návod.

1. Získajte zemepisnú šírku a dĺžku všetkých máp, ktoré chcete zobraziť, ako sme sa dozvedeli v kroku 2 tohto tutoriálu.
2. Vložte prvú mapu, ako sme sa dozvedeli v kroku 3 tohto tutoriálu. Ak chcete, aby mapa mala značku, pridajte značku ako v kroku 4.
3. Pre druhú mapu budete musieť do skriptu inicializovať () pridať 3 nové riadky:
   var latlng2 = nový google.maps.LatLng ( druhé súradnice );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = nový google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ak chcete na novej mape aj značku, pridajte druhú značku smerujúcu k druhým súradnicam a druhej mape:
   var myMarker2 = nový google.maps.Marker ({position: latlng2 , map: map2 , title: " Váš názov značky "});
5. Potom pridajte druhý

   kde chcete druhú mapu. Nezabudnite mu dať ID = "map_canvas_2" ID.

6. Po načítaní stránky sa zobrazia dve mapy

Tu je kód stránky s dvoma mapami Google na nej: