V dnešní době je pro firmy a podnikatele důležité, aby jejich kontaktní stránka byla co nejužitečnější a nejpřístupnější pro potenciální i stávající zákazníky. Jedním z klíčových prvků, který může na kontaktní stránce výrazně zlepšit uživatelskou zkušenost, je integrace mapové služby, jako je Google Maps. Tento článek vás provede kroky, jak na vaši webovou stránku efektivně implementovat mapu Google Maps.
Předpoklady
Před samotnou integrací je potřeba mít vytvořený účet na Google Cloud Platform (GCP) a povolit si Maps JavaScript API, což umožní vaší webové stránce komunikovat s Google Maps. Vytvoření API klíče je nutný krok, kterým získáte přístup k funkcím map.
Krok 1: Získání API klíče
- Přihlaste se do svého účtu na Google Cloud Platform.
- Vytvořte nový projekt nebo vyberte existující.
- Přejděte do sekce "APIs & Services > Credentials" a klikněte na "Create credentials", kde vyberete "API key".
- V nastaveních API klíče doporučujeme omezit klíč na specifické domény, aby se předešlo neoprávněnému použití.
Krok 2: Přidání mapy na vaši stránku
Po získání API klíče je čas přidat mapu na vaši kontaktní stránku. Toho lze docílit vložením HTML kódu, který obsahuje odkaz na Maps JavaScript API s vaším API klíčem.
<!DOCTYPE html>
<html>
<head>
<title>Kontaktní stránka</title>
<script src="https://maps.googleapis.com/maps/api/js?key=VÁŠ_API_KLÍČ&callback=initMap" async defer></script>
<script>
function initMap() {
var officeLocation = {lat: -34.397, lng: 150.644};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: officeLocation
});
var marker = new google.maps.Marker({
position: officeLocation,
map: map
});
}
</script>
</head>
<body>
<div id="map" style="height:400px;width:100%;"></div>
</body>
</html>
Nahraďte VÁŠ_API_KLÍČ vaším skutečným API klíčem a officeLocation souřadnicemi místa, které chcete na mapě zobrazit.
Krok 3: Přizpůsobení mapy
Google Maps API nabízí řadu možností, jak mapu přizpůsobit vašim potřebám. Můžete například změnit výchozí zoom, typ mapy (satelitní, terénní atd.) nebo přidat vlastní značky pro specifické lokality.
Integrace Google Maps na vaši kontaktní stránce není jen o zlepšení vizuální stránky webu, ale především o zvýšení uživatelské přívětivosti. S mapou snadno dostupnou a přehlednou mohou vaši návštěvníci rychle najít polohu vaší firmy, což může pozitivně ovlivnit jejich rozhodování o návštěvě nebo využití vašich služeb. Sledujte uvedené kroky a zjednodušte tak potenciálním zákazníkům cestu k vám.
