Jak dodać mapę z adresem firmy do strony internetowej

Większość sklepów internetowych, które mają oddziały offline lub punkty odbioru, powinny mieć mapy na stronie "Kontakty", aby ułatwić znalezienie drogi.

Zazwyczaj strona kontaktowa na Twojej stronie jest tworzona poprzez "Witryna -> Strony" lub "Sklep -> Projekt -> Strony". Otwórz go do edycji i przejdź do zakładki HTML. W tym trybie należy wstawić kod oferowany przez serwisy mapujące. Podstawowe usługi kartograficzne: Google.Maps, OpenStreetMap i Yandex.Maps. Wybierz ten, który oferuje najlepsze wyświetlanie Twojego regionu.

Google.Maps

Ze strony https://www.google.pl/maps/ znajdź swoją lokalizację, a z przycisku ☰ w rozwijanym menu po lewej stronie wybierz "Udostępnij lub umieść mapę". Przejdź do zakładki "Umieszczanie mapy", wyśrodkuj mapę i skopiuj kod widoku:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19582.78150719534!2d21.035632399999997!3d52.15527959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spl!2spl!4v1669029956500!5m2!1spl!2spl">" width="600" height="450" frameborder="0" style="border:0" rel="border:0" allowfullscreen></iframe>

OpenStreetMap

Wejdź na stronę https://www.openstreetmap.org/ i wybierz odpowiednią miejscowość. Z prawego menu rozwijanego wybierz ikonę "Udostępnianie" i kliknij zakładkę "HTML". Tutaj możesz skonfigurować ustawienia i skopiować kod:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=20.591812133789062%2C51.96500018357943%2C21.359481811523438%2C52.49992172845934&layer=mapnik" style="border: 1px solid black" rel="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=11/52.2333/20.9756">Wyświetl większą mapę</a></small>

Yandex.Maps

Dla Yandex.Maps istnieje konstruktor https://yandex.eu/map-constructor/ dostępny po rejestracji lub autoryzacji dla już istniejących kont Yandex. Użyj go do utworzenia mapy, dodaj niezbędne oznaczenia i drogi dojazdowe. Kliknij "Save and continue" > "Get map code" i skopiuj kod jak poniżej:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A645ef2995edb27aafb819044777aea2ca612ec7afb433c98246185b693f5b7b5&width=500&height=400&lang=en_FR&scroll=true"></script>

Po uzyskaniu wymaganego kodu wstaw go do strony "Kontakty" w trybie HTML i zapisz. W podglądzie można porównać rozmiar i w razie potrzeby, zmieniając wartości width i height w kodzie dostosować szerokość i wysokość mapy. Jeśli ma być wyświetlana pełna szerokość mapy, należy wypełnić width="100%"