Jak přidat mapu Google na webovou stránku

01 z 05

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

1. Přihlaste se k účtu Google pomocí účtu Google.
2. Přejděte do konzoly pro vývojáře
3. Procházejte seznamem a najděte API služby Google Maps v3 a poté klikněte na tlačítko "OFF" pro zapnutí.
4. Přečtěte si a souhlaste s podmínkami.
5. Přejděte na konzolu rozhraní API a v levém menu vyberte možnost "Přístup API"
6. V sekci Jednoduchý přístup API klikněte na tlačítko "Vytvořit nový server ...".
7. 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.
8. Zkopírujte text na řádek "API klíč:" (nezahrnuje tento název). Toto je klíč API pro mapy.

02 z 05

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.

1. Přejděte na stránku Geocoder.us a zadejte adresu do vyhledávacího pole.
2. Zkopírujte první číslo pro zeměpisnou šířku (bez předpisu) a vložte jej do textového souboru. Nepotřebujete ukazatel stupně (º).
3. 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 funguje pouze pro americké adresy, pokud potřebujete získat souřadnice v jiné zemi, měli byste vyhledat ve vašem regionu podobný nástroj.

03 ze dne 05

Př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í informace do hlavičky 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 máte všechny prvky skriptu přidány do hlavičky dokumentu, je třeba umístit mapu na stránku. To provedete přidáním prvku DIV s atributem id = "map-canvas". 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í atributu BODY:

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 nastaveny možnosti zoomu a středu.
• Ujistěte se, že váš prvek DIV je na stránce se správným ID.
• Ujistěte se, že váš prvek DIV má výšku.

04 z 05

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 skriptu následující text pod var var = = line:

var myLatlng = nový google.maps.LatLng ( šířka, délka );
var marker = nový google.maps.Marker ({
pozice: myLatlng,
mapa: mapa,
název: " 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,
název: " 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 05

Př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.

1. Získejte zeměpisné šířky a délky všech map, které chcete zobrazit, jak jsme se seznámili v kroku 2 tohoto kurzu.
2. 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.
3. 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);
4. 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: " Váš název značky "});
5. Pak přidejte druhou

   kde chcete druhou mapu. A ujistěte se, že mu dáte id = "map_canvas_2" ID.

6. Po načtení stránky se zobrazí dvě mapy

Zde je kód stránky s dvěma mapami Google na něm: