Výukový program Google Maps JavaScript API: Přidejte vlastní mapu na svůj web

Mapy Google nám pomáhají každý den procházet našimi cestami a hledat místa způsobem, který byl před několika desítkami let nepředstavitelný. Je to užitečné nejen při hledání cesty, ale také vidíme mnoho příkladů map používaných pro vizualizaci dat, jako je například to, jak nedávno mnoho webů používá mapy k vizualizaci šíření COVID-19 po celém světě. Dnes se naučíme, jak můžeme pomocí rozhraní Google Maps JavaScript API vytvářet vlastní mapy pro naše webové stránky a aplikace.


Možná vás zajímá, proč bychom se měli kopat do JavaScriptu API pro Mapy Google a vytvářet mapy, když můžeme použít Statická mapa místo toho použijte některý z dostupných doplňků WordPress, aniž byste se museli potýkat s kódováním.

Obě jsou samozřejmě vynikajícími možnostmi, pokud chcete na svém webu zobrazit nějaké sídlo firmy. Rozhraní API Google Maps JavaScript API vám však poskytuje větší kontrolu nad časy, kdy chcete vytvořit vlastní mapu složitější, než jakou nabízí předem vytvořený plugin..

Výukový program Google Maps JavaScript API

Pokud nechcete trávit čas kódováním a chcete jednodušší způsob zobrazení map na svém webu, doporučuji Mapy Google blokují vydru.

Získání klíče API JavaScriptu Google Maps

Než začneme, musíme nejprve získat klíč API pro Mapy Google. Můžete to získat od tady. Rozhraní Google Maps API není zcela zdarma, ale přichází s plánem zdarma, který ve většině případů stačí.

Máte API klíče? Vyjeďte třetí výjezd z kruhového objezdu a pokračujte v tutoriálu. ��

Vytvoření jednoduché mapy

Základní instance Map Google s výchozím nastavením.Základní instance Map Google s výchozím nastavením.

Nejprve vytvoříme jednoduchou mapu Google, abychom mohli začít. I když můžete oddělit JavaScript a CSS, v tomto tutoriálu používáme jeden soubor HTML. Zde je struktura, kterou budeme používat:

html>
<html>
<hlava>
<titul>Jednoduchý název mapy>
<meta name ="výřez" content ="počáteční měřítko = 1,0">
<meta charset ="utf-8">
<styl>
#map {
výška: 100%;
}

html, tělo {
výška: 100%;
marže: 0;
čalounění: 0;
}
styl>
hlava>
<tělo>
<div id ="mapa">div>
<skript>
nechat mapovat;
funkce initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centrum: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}
skript>
<skript src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" asynchronní odklad>skript>
tělo>
html>

Jakmile se Google Maps API načte, zavolá funkci initMap, která inicializuje mapu. Pokud kód rozdělíme ještě dále, použijeme prázdné div s ID mapy k deklaraci, kam chceme mapu vykreslit.

nechat mapovat;
funkce initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centrum: {
lat: 51,513329,
lng: -0,088950
},
zoom: 14
});
}

V našem JavaScriptu nejprve nastavíme proměnnou mapy mimo funkci, takže je součástí globálního rozsahu, abychom mohli mapu později upravit. Ve funkci initMap nejprve deklarujeme novou mapu Google a nastavíme ji na vykreslení voláním prvku s ID mapy. Poté určíme naše možnosti, kterými jsou střed mapy a úroveň zvětšení.

Používáme souřadnice města Londýn, historická památka uprostřed Londýna, jako centrum mapy. Později diskutujeme o tom, jak můžete pomocí Maps API najít souřadnice libovolného místa na mapě. Ale prozatím, pokud jste zvědaví, můžete použít latlong.net najít souřadnice jakékoli adresy rychle.

Typy map

Nyní, když máme základní mapu, se můžeme podívat na možnosti přizpůsobení, které nám poskytuje rozhraní API JavaScript Google Maps API. První možnost, kterou budeme používat, je typ mapy. Mapy Google podporují čtyři typy map, kterými jsou:

  • cestovní mapa: výchozí mapa, kterou obvykle vidíte.
  • satelit: satelitní zobrazení Map Google a Google Earth, je-li k dispozici.
  • hybrid: směs plánů a satelitního pohledu.
  • terén: mapa založená na informacích o terénu, jako jsou hory a údolí.

V našich možnostech map můžeme přidat vlastnost mapType a vybrat požadované zobrazení, například:

map = new google.maps.Map (document.getElementById (‘map’), {
centrum: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hybrid’
});

Pro náš příklad používáme hybridní mapu. Můžete experimentovat s různými typy a zjistit, který z nich vyhovuje vašemu případu použití.

Možnosti mapy

Po typu mapy jsme se dostali k ovládací prvky mapy. Mapy Google vám umožňují použít kterýkoli ze svých šesti ovládacích prvků v mapách. Najdete seznam ovládacích prvků na jejich webových stránkách.

V případě potřeby můžete určit ovládací prvek, který chcete použít, a jeho umístění, například:

map = new google.maps.Map (document.getElementById (‘map’), {
centrum: {
lat: 51,513329,
lng: -0,08895
},
zoom: 14,
mapTypeId: ‘hybrid’,
scaleControl: true,
fullscreenControlOptions: {
pozice: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Povolujeme scaleControl, který zobrazuje měřítko mapy na samém spodku vedle autorských práv společnosti Google, a to deklarováním jako PRAVDA. A v dalším řádku změníme vzhled fullscreenControl z výchozí výchozí polohy vpravo napravo dole pomocí vlastnosti fullscreenControlOptions. Podobně můžete upravit polohu dalších ovládacích prvků.

Chcete ovládání, které dělá něco jiného než ty vestavěné? Nebojte se, Mapy Google také umožňují vytvářet vlastní ovládací prvky pro vaši mapu.

Pojďme mluvit o značkách!

Přidání značky

Značky jsou úžasné a umožňují vytvářet mnoho interaktivních aplikací s mapou. Některé webové stránky pro rezervace hotelů například používají značky k zobrazení polohy hotelů na mapě. A lze je také velmi snadno přidat.

Pojďme přidat značku na London Bridge s následujícím kódem:

let marker = new google.maps.Marker ({
pozice: {
lat: 51,506821,
lng: -0,0879
},
mapa: mapa,
název: ‘The London Bridge’
});

Jak vidíte výše, kód pro naši značku má tři vlastnosti. První z nich jsou souřadnice. Poté předáme proměnnou mapy, kde jsme na začátku uložili naši mapu, a nakonec předáme nadpis značky.

Adresu URL můžete také předat vlastní ikoně značky s vlastností ikony ve výše uvedeném bloku kódu.

Přidání informačního okna

Možná zjistíte, že u našich značek něco chybí. Když kliknete na značku na mapě, obvykle se zobrazí vyskakovací okno s dalšími podrobnostmi. Toto vyskakovací okno je samo o sobě jinou součástí, která se nazývá InfoWindow.

Mapy Google s vlastní značkou.Mapy Google s vlastní značkou.

Naštěstí pro nás je velmi snadné připojit k naší značce InfoWindow.

let infoWindow = new google.maps.InfoWindow ({
obsah: ‘

londýnský most


});

marker.addListener (‘click’, function () {
infoWindow.open (mapa, značka);
});

Nejprve vytvoříme novou proměnnou infoWindow, která ukládá naši komponentu InfoWindow. Předáváme ji pouze vlastnost obsahu, která obsahuje HTML, které se zobrazí po kliknutí. Poté přidáme do naší značky posluchače událostí klepnutí, což jí řekne, aby po kliknutí na značku otevřelo informační okno.

Stejně tak můžete pomocí značky a informačního okna vytvořit interaktivní zážitky s mapou.

Nyní je ten pravý okamžik na chvilku pauzy a ohlédnutí za pokrokem, kterého jsme dosáhli. Pouze v 30 řádcích kódu jsme pomocí rozhraní Google Maps JavaScript API vytvořili vlastní mapu se značkami a infoboxy. Stojí za zmínku, jak snadné je používat API Map Google pro dělat věci, které by se pro začátečníka zdály náročné..

Dynamická modifikace & posluchače událostí

Značky a možnosti mapy nemusí být nutně důvodem, proč by někdo prokopal předem vytvořený plugin Google Map a přepnul se na API. Jsou slibné, ale spousta pluginů tyto funkce již nabízí. Zkusme něco, co není možné pomocí pluginu.

Dynamická modifikace

Mapy Google ano mnoho metod interagovat s mapou a měnit její chování. Pokud jste zvyklí pracovat s DOM, neměli byste mít s těmito metodami mnoho problémů.

Některé z těchto metod vám umožňují získat informace z mapy, například getCenter, která vrací středové souřadnice mapy. A podobně vám některé umožňují změnit chování, například setCenter, který mění střed mapy.

Existuje mnoho metod a měli byste se na všechny podívat, takže víte, co je možné s API. Použijte jednu z těchto metod s naší mapou.

K našemu příkladu můžeme přidat tlačítko, které vrátí centrum naší mapy zpět do londýnského City.

Nejprve musíme do našeho kódu přidat tlačítko:

<tlačítko id ="přinášetToCenter">Přiveďte na Centerbutton>

Nyní k našemu tlačítku připojujeme posluchače událostí, který spustí metodu setCenter:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘click’, function (e) {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0,08895
});
});

A to je vše. Jednoduché, že? Použili jsme map.setCenter, ve kterém mapa je proměnná, kterou jsme na začátku deklarovali, abychom naši mapu drželi.

Měli byste se pokusit experimentovat s různými metodami a prozkoumat limity API.

Posluchači událostí

Dalším konceptem, s nímž mohou vývojáři jazyka JavaScript znát, jsou posluchači událostí. Můžete připojit akce ke konkrétním událostem, což znamená, že když dojde k události, jako je změna centra, tyto akce se spustí.

Vezměte si jeden z příkladů z dokumentů Mapy Google, jak získat souřadnice mapy, když na ni kliknete kdekoli.

nechte infoWindowLatLang;

map.addListener (‘click’, function (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = nový google.maps.InfoWindow ({
pozice: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (mapa);
});

Jak vidíte, koncept je do značné míry stejný jako to, jak posluchači událostí pracují v JavaScriptu. Nejprve k naší mapě připojíme posluchače událostí onClick. Uvnitř našeho posluchače událostí získáme souřadnice místa, kde uživatel klikne, a umístíme jej do okna InfoWindow.

Pokud zkontrolujete Blok Google Map od Ottera, můžete vidět, jak tyto posluchače událostí a metody používáme k tomu, aby dělali věci, jako je například přetažení & kapku Značek a kliknutím na ni odeberte značku.

Vytvoření vlastního ovládacího prvku

Nakonec tento článek zakončíme příkladem stavby vlastní ovládací prvky pro vaše Mapy Google.

Jak již bylo uvedeno výše, vytváříme vlastní tlačítko, které přidá značku do středu mapy. I když kód pro tento vypadá trochu komplikovaný, je to jednoduché.

Nejprve vytvoříme tlačítko jako jeho funkci, které má posluchače událostí, který přidá značku do středu mapy.

Je třeba nahradit YOUR_API_KEY ve výše uvedeném bloku kódu klíčem API. Vykreslí jednoduchou mapu Google s danou šířkou a délkou jako jejím středem.

funkce MarkerControl (controlDiv, map) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solidní #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘ukazatel’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Kliknutím přidáte značku’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘click’, function () {
nový google.maps.Marker ({
pozice: map.getCenter (),
mapa: mapa
});
});
}

Většina výše uvedeného kódu pouze vytváří prvek pro naše tlačítko. Na samém konci připojíme k našemu tlačítku posluchače událostí, který přidává značku do středu mapy.

Nyní musíme připojit naše tlačítko k naší mapě, což děláme s následujícím kódem:

const markerControlDiv = document.createElement (‘div’);
const markerControl = nový MarkerControl (markerControlDiv, map);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Výše uvedený kód připojuje naše tlačítko k mapě na jeho levou dolní pozici. A to je vše. Stačí přidat vlastní ovládací prvky do Map Google pomocí rozhraní API JavaScriptu.

Mapy Google s vlastním tlačítkem.Mapy Google s vlastním tlačítkem v levém dolním rohu.

Závěr

Pracovní příklad všeho, co jsme v tomto článku udělali, je k dispozici online na CodeSandbox.

To je tento článek, a doufám, že vám to poskytlo jistotu při práci s rozhraním API Google Maps JavaScript API. Je to neuvěřitelně jednoduché použití a umožňuje vám s mapou vytvořit téměř vše, co si přejete!

Nyní byste se měli pokusit využít to, co jste se dnes naučili, a vyzkoušet si to vytvořením demo projektu pro sebe pomocí Map Google. Pokud máte nějaké dotazy, dejte nám vědět v komentářích; rádi jim odpovíme!

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení a prezentace Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map