Jak utworzyć interaktywną mapę na stronę internetową

Zwykła osadzona mapa pokazuje znacznik. Nie pomaga to gościowi znaleźć bocznego wejścia, przejść ścieżką od dworca ani sprawdzić zasięgu dostaw. Draw on a Map pozwala najpierw narysować te szczegóły, a potem osadzić gotową mapę. Nie potrzebujesz klucza API ani konta.

Utwórz mapę i skopiuj kod osadzenia

Zapisz mapę na koncie przed skopiowaniem kodu, jeśli strona ma pokazywać późniejsze zmiany. Kod z niezapisanej mapy tworzy stałą kopię.

1. Otwórz Draw on a Map i wyszukaj lokalizację.
2. Narysuj trasę, obszar, strzałki lub notatki.
3. Powiększ i przesuń mapę do widoku, który odbiorcy mają zobaczyć jako pierwszy. Osadzenie otwiera się w tym widoku.
4. Wybierz Osadź (</>) na górnym pasku narzędzi.
5. Wybierz miejsce wklejenia kodu: HTML, WordPress, Wix lub Squarespace. Okno pokaże kroki dla danej platformy.
6. Ustaw wysokość i wybierz Kopiuj kod.
7. Wklej kod na stronę, opublikuj ją i sprawdź na komputerze oraz telefonie.

W WordPress wklej kod do bloku Własny HTML. W Wix dodaj Embed Code → Embed HTML. W Squarespace dodaj blok Code ustawiony na HTML.

Jak wygląda kod

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map embed"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

To szablon. Skopiuj rzeczywisty kod z okna Osadź, które uzupełni src Twojej mapy. Szerokość dopasowuje się do kolumny. Zmień height, jeśli strona wymaga wyższej lub niższej mapy.

Bezpłatne osadzenia pokazują „Działa dzięki Draw on a Map”. Aby usunąć oznaczenie, zapisz mapę i przejdź na Pro.

Aktualizuj osadzoną mapę

Zapisz mapę na koncie przed skopiowaniem kodu. Osadzenie pokaże wtedy ostatnią zapisaną wersję, więc możesz poprawić trasę lub przesunąć znacznik bez zmiany strony internetowej.

Kod z niezapisanej mapy przechowuje rysunek w adresie URL. Nie zmienia się po edycji mapy. Po zmianie ponownie otwórz Osadź, skopiuj nowy kod i zastąp starą ramkę iframe.

Duże zaimportowane zbiory danych nie mieszczą się w adresie URL. Jeśli okno Osadź prosi o wcześniejszy zapis, zapisz mapę i otwórz Osadź ponownie.

Jeśli mapa się nie pojawia

Użyj bloku przyjmującego HTML lub kod iframe. Pole akceptujące tylko adres strony nie obsłuży całego iframe. Jeśli mapa znika po publikacji, kreator strony może usuwać ramki iframe. Sprawdź jego ustawienia osadzonych treści.

Pomysły na mapy internetowe

• Wydarzenia i wesela: zaznacz właściwe wejście, przystanek transportu i parking na jednej mapie.
• Wynajem i podróże: narysuj dojście od dworca do mieszkania lub skrót na plażę.
• Firmy usługowe: narysuj obsługiwany obszar. Jeśli odbiorcy mają sprawdzać własny adres, płatny Widżet obszaru obsługi zamienia granicę w narzędzie sprawdzania adresów na stronę.

Utwórz mapę na swoją stronę

Powiązane poradniki

• Narysuj okrąg na mapie: zaznacz obszar dostaw lub obsługi dokładnym promieniem.
• Rysuj na Mapach Google: przenieś istniejącą mapę Google My Maps przed osadzeniem.
• Udostępnij własne wskazówki piesze: narysuj trasę pomijaną przez nawigację.