Užitečné tipy

Google mapa

Pin
Send
Share
Send
Send


Ahoj všichni! Dnes se naučíme nejen, jak nainstalovat mapu Google Maps na náš web (jakákoli stránka html), ale také jak stylizovat Mapy Google - změnit barvy mapy, přidat popis ke značce v Mapách Google, změnit typ (obrázek) značky a přidat vlastní popis. Pojďme!)

Důležitá poznámka. Všechny naše experimenty provedeme lokálně. Abyste mohli na svém webu používat Mapy Google, musíte mít speciální klíč Auth. Usnadněte si to. Vynecháme jeho přijetí a nebudeme jej brát v úvahu.

1. Vkládání Map Google

Nejprve vytvořme html stránku a na ni vložte Mapy Google. Uděláme to pomocí rozhraní Google Maps API. To znamená, pojďme pokročilou cestou. Je třeba poznamenat, že Google má dobrou dokumentaci a pokyny k používání Map Google v ruštině a angličtině. Takže programátoři tam mohou okamžitě jít. Pokud chcete získat jasnou lekci krok za krokem, pak zůstaňte.

Nyní popíšu kroky, které je třeba udělat, a poté dám kód stránky s komentáři. Nejprve vytvořte stránku HTML. Pak:

    Vytvořte prvek na stránce

Zde je kód stránky, který máme. Věnujte pozornost komentářům uvnitř, popsal jsem, co se děje a kde.

Nyní máme takovou mapu, ale není dostatek značky pro označení místa.
Také se zeptáte, jak na mapě vyznačit adresu, kterou potřebujeme.

2.1 Určete střed mapy

Ukažme na mapě umístění Velkého divadla. V parametru střed jsme určili souřadnice středu centrování mapy:

Potřebujeme získat takové souřadnice pro naše místo. Chcete-li to provést, přejděte do běžné verze Map Google a klikněte pravým tlačítkem na místo, které nás zajímá. Klikněte na „Co je tady“ a získejte souřadnice místa. (55,760186, 37,618711). Zároveň změním měřítko nastavením na 18: zoom: 18.

Jak přidat událost kliknutím na mapu nebo značku v Mapách Google

Událost můžete také přidat kliknutím na značku. V konečném kódu stránky to neuděláme. Ale to se děje takto:

Prvním parametrem metody addListener je objekt, pro který je událost přidána, v našem případě případ. Objektem může být nejen značka, ale i samotná karta. Parametr druhého kliknutí určuje typ události, v tomto případě jedno kliknutí. Třetí je obslužná funkce, která bude fungovat.

Podrobněji o značce a možnostech práce s ním doporučuji prostudovat dokumentaci.

3. Definujte své vlastní styly pro mapu Google Maps

Je čas zbarvit naši mapu. Dopřejte mu zvláštní a jedinečný vzhled. Uděláme to pomocí služby Snazzy Maps, která má velké množství vzhledů pro mapy Google. A umožňuje vám vyrobit takové skvělé karty:

Vybral jsem si styl mapy s názvem Modrá voda. Na stránce tohoto stylu najdete kód pro návrh a stáhněte si soubor s příkladem - tento styl můžete použít v Mapách Google.

Styly pro návrh mapy přidáváme do vlastnosti styly, kterou určíme pro proměnnou map - když vytváříme objekt s mapou v ní.

Zde je celý fragment kódu:

Naše mapa nyní vypadá takto:

4. Informační okna

Mapu lze dále vylepšit přidáním informačního okna kliknutím na naši značku. Dokumentace pro ně leží zde. Stručně řečeno, pro přidání informačního okna musíte:

  1. Vytvořte samotné okno a obsah uvnitř
  2. Nechte to vypadat kliknutím na značku.

To vše se děje uvnitř funkce initMap ()

4.3 Děláme to tak, že kliknutím na značku - se objeví informační okno

Mapa s informačním oknem nyní vypadá takto:

Z karty můžete také odstranit standardní ovládací prvky, zapnout / vypnout potřebné a zbytečné nebo dokonce vytvořit vlastní. Popis toho všeho najdete v dokumentaci.

Pin
Send
Share
Send
Send