Získejte klíč API služby Google Maps pro vaše stránky
Nejlepší způsob, jak přidat mapu Google na vaše webové stránky, je použití rozhraní Google Maps API. A Google doporučuje, abyste získali klíč API, abyste mohli používat mapy.
Nejste vyžadováni k získání klíče API pro použití API služby Google Maps v3, ale je to velmi užitečné, protože umožňuje monitorovat vaše používání a platit za další přístup. Aplikace Google Maps API v3 má kvótu 1 žádost za sekundu na uživatele na maximálně 25 000 žádostí za den. Pokud vaše stránky překročily tyto limity, musíte povolit fakturaci, abyste získali více.
Jak získat klíč API služby Google Maps
- Přihlaste se k účtu Google pomocí účtu Google.
- Přejděte do konzoly pro vývojáře
- Procházejte seznamem a najděte API služby Google Maps v3 a poté klikněte na tlačítko "OFF" pro zapnutí.
- Přečtěte si a souhlaste s podmínkami.
- Přejděte na konzolu rozhraní API a v levém menu vyberte možnost "Přístup API"
- V sekci Jednoduchý přístup API klikněte na tlačítko "Vytvořit nový server …".
- Zadejte adresu IP svého webového serveru. Toto je IP, odkud budou vaše požadavky na Mapy pocházet. Pokud neznáte svou adresu IP, můžete ji vyhledat.
- Zkopírujte text na řádek "API klíč:" (nezahrnuje tento název). Toto je klíč API pro mapy.
Převést adresu na souřadnice
Chcete-li používat Mapy Google na svých webových stránkách, musíte mít zeměpisnou polohu a zeměpisnou délku. Můžete je získat z GPS nebo můžete použít online nástroj, jako je Geocoder.us vám to řeknu.
- Přejděte na stránku Geocoder.us a zadejte adresu do vyhledávacího pole.
- Zkopírujte první číslo pro zeměpisnou šířku (bez předpisu) a vložte jej do textového souboru. Nepotřebujete ukazatel stupně (º).
- Zkopírujte první číslo zeměpisné délky (znovu bez předpisu) a vložte jej do textového souboru.
Vaše zeměpisná šířka a délka budou vypadat takto:
40.756076-73.990838
Geocoder.us pracuje pouze pro adresy USA, pokud potřebujete získat souřadnice v jiné zemi, měli byste vyhledat podobný nástroj ve vaší oblasti.
03 ze dne 05Přidání mapy na vaši webovou stránku
Nejprve přidejte mapový skript do souboru
dokumentu
Otevřete webovou stránku a přidejte následující HLAVA dokumentu.
Změňte zvýrazněnou část na čísla zeměpisné šířky a délky, které jste zaznamenali v druhém kroku.
Za druhé, přidejte element mapy na stránku
Jakmile přidáte všechny prvky skriptu do složky HLAVA vašeho dokumentu musíte umístit mapu na stránku. To provedete přidáním příkazu a DIV element s id = "mapa-plátno" atribut. Doporučuji také, abyste tento štítek rozdělili šířkou a výškou, která se vejde na vaši stránku:
Nakonec nahrávejte a otestujte
Poslední věc, kterou musíte udělat, je načtení stránky a otestování zobrazení mapy. Zde je příklad mapy Google na stránce. Poznámka: kvůli způsobu, jakým funguje cms.css.com, budete muset kliknout na odkaz, aby se mapa objevila. Nebude tomu tak na vaší stránce.
Pokud se mapa nezobrazí, zkuste ji inicializovat pomocí tlačítka a TĚLO atribut:
onload = "inicializovat ()" >
Další informace o tom, zda se vaše mapa nevkládá, patří:
- Podívejte se na nápisy ve vašem jazyce JavaScript, včetně případu. JavaScript je citlivý na velká a malá písmena.
- Ujistěte se, že máte
zoomacentrumnastavení možností. - Ujistěte se, že vaše
DIVelement je na stránce se správným ID. - Ujistěte se, že vaše
DIVprvek má výšku.
Přidat značku na mapu
Ale jaká je dobrá mapa vaší lokality, pokud neexistuje značka, která by lidem říkala, kam by měli jít?
Chcete-li přidat standardní červenou značku Google Maps, přidejte do svého skriptu níže uvedený text var map = … řádek:
var myLatlng = nový google.maps.LatLng ( zeměpisná šířka, délka );var marker = nový google.maps.Marker ({pozice: myLatlng,mapa: mapa,titul:" Bývalý ředitelství '});
Změňte zvýrazněný text na zeměpisnou šířku a délku a název, který chcete zobrazit, když se lidé pohybují nad značkou.
Na stránku můžete přidat tolik značek, stačí přidat nové proměnné s novými souřadnicemi a názvy, ale pokud je mapa příliš malá, aby se zobrazily všechny značky, nezobrazí se, dokud se čtečka nezvětší.
var latlng 2 = nový google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = nový google.maps.Marker ({poloha: latlng 2 ,mapa: mapa,titul:" Apple Computer '});
Zde je příklad mapy Google se značkou. Poznámka: kvůli způsobu, jakým funguje cms.css.com, musíte klepnout na odkaz, aby se mapa objevila. Nebude tomu tak na vaší stránce.
05 z 05Přidejte druhou (nebo více) mapu k vaší stránce
Pokud jste se podívali na příkladovou stránku Google Maps, zjistíte, že na stránce zobrazuji více než jednu mapu. To je velmi snadné. Zde je návod.
- Získejte zeměpisné šířky a délky všech map, které chcete zobrazit, jak jsme se seznámili v kroku 2 tohoto kurzu.
- Vložte první mapu, jak jsme se dozvěděli v kroku 3 tohoto tutoriálu. Pokud chcete, aby mapa měla značku, přidejte značku jako v kroku 4.
- Pro druhou mapu budete muset do skriptu inicializovat () přidat 3 nové řádky:
var latlng2 = nový google.maps.LatLng ( druhé souřadnice );var myOptions2 = {zoom: 18, střed: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = nový google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Chcete-li na nové mapě také značku, přidejte druhou značku ukazující na druhé souřadnice a druhou mapu:
var myMarker2 = nový google.maps.Marker ({pozice: latlng2 , mapa: map2 , název: " Název značky ' }); - Poté přidejte místo, kde chcete druhou mapu. A ujistěte se, že to uděláte
id = "map_canvas_2"ID. - Po načtení stránky se zobrazí dvě mapy
Zde je kód stránky s dvěma mapami Google na něm:
