Większość firm uważa za przydatne, a nawet konieczne, umieszczenie interaktywnej mapy na stronie, aby ułatwić odwiedzającym znalezienie Cię. Dotyczy to zwłaszcza dużych miast: Twoim klientom będzie znacznie łatwiej odnaleźć drogę, jeśli wizualnie zobaczą lokalizację biura, potrafią przemyśleć trasę i obliczyć czas dojazdu.
Dodaj do swojej witryny interaktywną mapę, na przykład znaną na całym świecie wyszukiwarkę Google. Można to zrobić za pomocą bezpłatnej usługi Google Maps.
Krok 1. Uzyskaj kod, aby zainstalować mapę Google na stronie
Aby więc umieścić interaktywną mapę Google na swojej stronie internetowej, musisz najpierw uzyskać kod mapy ze znakiem Twojej organizacji. Aby to zrobić, w GoogleMaps wpisz adres lub nazwę firmy w pasku wyszukiwania lub znajdź ręcznie niezbędny dom na mapie i umieść znak jednym kliknięciem myszy.
Po przypięciu mapy kliknij ikonę menu obok paska wyszukiwania.
W menu, które się otworzy, wybierz element „Link / Kod”.
W oknie, które się otworzy, przejdź do zakładki „Kod”, wybierz rozmiar mapy i skopiuj proponowany kod html.
Krok 2. Jak wstawić kod karty 2gis na stronę?
Tak więc kod jest odbierany, pozostaje tylko umieścić go na żądanej stronie witryny. Postanowiliśmy dodać kartę do sekcji „Kontakty”. Wchodzimy do panelu administracyjnego „Nubex”, w panelu sterowania wybieramy sekcję „Strony”, znajdź żądaną sekcję na liście i kliknij "Edytować".
Będziemy pracować z blokiem tekstowym. Wciśnij guzik "Źródło" aby wejść w tryb edycji kodu. Wklej kod z GoogleMaps w polu tekstowym i zapisz zmiany.
Wchodzimy na stronę "Kontakty" naszej witryny i cieszymy się z aktualizacji!
Dzięki mapom Google każdy odwiedzający Twoją witrynę będzie mógł zobaczyć lokalizację organizacji, uzyskać wskazówki dojazdu samochodem, na transport publiczny lub pieszo, a także zapisz swój adres w swoich notatkach.
Oprócz map z Google możesz również umieszczać mapy z i 2gis na stronie, opowiemy o nich w odpowiednich artykułach.
Dość często przy tworzeniu strony konieczne staje się umieszczenie na niej mapy, która wskazywałaby lokalizację Twojej organizacji. W rzeczywistości mapa na stronie jest bardzo wygodna: przede wszystkim dla użytkowników. Będą mogli natychmiast, bez wychodzenia z Twojego zasobu, zobaczyć, jak mogą Cię znaleźć, co jest w pobliżu i określić, jak daleko od ich lokalizacji znajduje się Twoja organizacja. Nie każdy wie, jak wstawić mapę na stronę internetową. A zrobienie tego jest bardzo, bardzo proste!
W tym artykule opowiem i pokażę, jak w ciągu kilku minut możesz wstawić mapę z wybraną lokalizacją na stronach Twojej witryny.
Jak wstawić mapę do strony internetowej
Tak więc, aby wstawić mapę do witryny, skorzystamy z usługi Google.
1. Pierwszą rzeczą, którą musimy zrobić, to wejść na stronę Google Maps.
2. Teraz, aby wykonać wszystkie potrzebne nam operacje, najlepiej jest przejść do „Interfejsu klasycznego”.
Aby to zrobić, kliknij ikonę znaku zapytania w prawym dolnym rogu ekranu.
Przed tobą otworzy się mały wysuwany panel menu, w którym musisz wybrać „Klasyczny interfejs”.
Następnie pojawi się kolejne wyskakujące okno, w którym zostaniesz poproszony o wyjaśnienie, dlaczego chcesz korzystać z klasycznego interfejsu. Możesz zaznaczyć jeden z elementów lub nie możesz go zaznaczyć, ale natychmiast kliknij niebieski link „Klasyczny interfejs” tuż poniżej.
Następnie zostaniesz przeniesiony do klasycznego interfejsu Google Maps, gdzie jest wszystko, czego potrzebujemy, aby umieścić mapę na stronie witryny.
3. Teraz wprowadź wymagany adres w polu adresu. Nie zapominaj, że musisz podać kraj, miasto, ulicę i dom, czyli pełny adres.
W rezultacie otrzymasz swoją lokalizację na mapie, oznaczoną czerwonym znacznikiem.
4. Teraz musimy umieścić kod do osadzenia na naszej stronie internetowej, a także ustawić kilka ustawień.
Aby uzyskać kod do osadzenia, musimy kliknąć ikonę, aby uzyskać link lub kod (znajduje się po prawej stronie ikony z drukarką).
5. Tutaj interesuje nas kod HTML do dodania do strony (drugie pole).
Również w tym kodzie możesz zobaczyć niektóre parametry, które można zmienić. Są to wymiary mapy, czyli jej wysokość i szerokość. Możesz także ustawić ramkę dla mapy. Domyślnie wartość graniczna wynosi zero, ale możesz to zmienić, wstawiając na przykład jeden.
Jeśli potrzebujesz, zmień te parametry, chociaż możesz to zrobić z kodu strony internetowej. Jeśli nie jest to konieczne, po prostu skopiuj cały kod.
6. Teraz pozostaje tylko wkleić skopiowany kod w miejsce swojej strony internetowej, w którym chcesz zobaczyć mapę.
Możesz utworzyć oddzielny blok „div” specjalnie dla swojej mapy, który możesz dalej stylizować za pomocą pliku arkusza stylów.
Włożę tutaj swoją kartę. Zobacz, jak to będzie wyglądać.
W rezultacie użytkownik zobaczy Twoją lokalizację oznaczoną znacznikiem. Będzie mógł przesuwać mapę, powiększać i pomniejszać.
Ponadto nad znacznikiem zostanie wyświetlone okno z Twoim adresem. A poniżej link do obejrzenia mapy w większej skali.
To wszystko, wszystko jest bardzo proste, funkcjonalne i wygodne.
Wykorzystaj to dla swojego zdrowia!
Byłbym zadowolony, gdyby ta lekcja była dla Ciebie przydatna. W ramach podziękowania zostaw swój komentarz i udostępnij artykuł za pomocą przycisków portale społecznościowe, które znajdują się tuż poniżej.
Zasubskrybuj również aktualizację bloga, jeśli jeszcze nie subskrybujesz. Obiecuję Ci wiele przydatnych materiałów.
Była z tobą Anna Kotelnikova.
Powodzenia i do zobaczenia wkrótce.
Witam, chciałbym rozpocząć ten artykuł od małej notatki.
Ci, którzy lubią nie tylko rozwój, ale także promocję witryn, wiedzą, że wymagania dla witryn rosną z roku na rok, wyszukiwarki starają się wykorzenić strony śmieci i zachować ich jak najbardziej trafne. Przeglądając więc najnowsze konferencje dotyczące promocji serwisów komercyjnych, zauważyłem jeden fakt, który we wszystkich przypadkach jest podobny - jest to projekt strony kontaktowej. Dawno minęły czasy, kiedy ta strona zawierała tylko kilka numerów telefonów i formularz kontaktowy. Teraz musisz podać jak najwięcej informacji kontaktowych. W takim przypadku po prostu nie możesz obejść się bez dynamicznej mapy lokalizacji swojego biura. Ona stała się część integralna dowolna strona kontaktowa witryny komercyjnej.
Yandex dostarczył deweloperowi własne rozwiązanie w tym kierunku - a mianowicie „Yandex Maps Constructor”, który umożliwia webmasterom bezproblemowe dodawanie dowolnej mapy do swojej witryny.
Przejdźmy teraz bezpośrednio do działań.
1.) Najpierw przejdź do samego konstruktora map - http://api.yandex.ru/maps/tools/constructor/.
Zobaczysz mapę i pole, w którym możesz podać potrzebny adres.
Możesz stworzyć mapę, nawet bez logowania się do Yandex.
2.) Wpisz adres, którego potrzebujesz, po czym zobaczysz monit z pełne imię i nazwisko ulice, miasta i numery domów.
3.) Po wybraniu adresu możesz określić opis tagu, a także wybrać jego kolor. Po ustawieniach naciśnij przycisk „OK”. I schodzimy na dół strony.
5.) Skopiuj dostarczony kod i wklej go w potrzebne miejsce na stronie.
Kilka uwag
- ta metoda wstawiania mapy Yandex do witryny jest odpowiednia dla dowolnego CMS: Joomla, Opencart, WordPress i innych.
- często edytor wizualny, np. w joomla, tnie kod. Dlatego zaleca się pracę ze stroną kontaktową bez edytora. Lub wstaw mapę po wszystkich wizualnych zmianach.
Skopiuj kod utworzonej mapy do pliku tekstowego, a podczas edycji strony kontaktowej, jeśli kod jest zniekształcony, zawsze możesz go przywrócić.
To wszystko na dziś, w następnych artykułach będę nadal układał ściągawki na temat pracy technicznej z witrynami.
Jeśli chcesz wstawić dobra karta do strony internetowej wskazując na nim lokalizację np. swoje biuro, magazyn, a następnie skorzystaj z tak znanych narzędzi internetowych jak mapa strony z Yandex lub mapa witryny z Google.
W tym artykule dowiesz się, dlaczego i jak wstawić mapę Yandex do witryny.
Tak wygląda np. mapa Yandex, którą wstawiliśmy na stronie Centrum handlowe... Mógł być bardziej szczegółowy, ze zdjęciami domów na schemacie, ale w tym przypadku ważniejsze było wskazanie lokalizacji centrum handlowego w stosunku do najbliższych wsi, dlatego wybrano małą skalę.
Do czego służy mapa strony?
Możesz się uśmiechnąć po przeczytaniu tego pozornie retorycznego pytania. „Mapa jest potrzebna, aby odwiedzający wiedzieli, gdzie jesteśmy” to prosta odpowiedź, zbyt prosta, aby zrozumieć rolę mapy, zwłaszcza w przypadku witryny komercyjnej. Oto kilka ważne aspekty dostępność karty na stronie:
- Zapłacić Specjalna uwaga: posiadanie karty znacznie zwiększa stopień zaufania do twojego zasobu. Wizualne wyeksponowanie lokalizacji firmy, biura, sklepu, podświadomie wyzwala potencjalnego klienta (łagodzi lęki typu: „co jeśli oszuka i zniknie?”), co oznacza, że zwiększa prawdopodobieństwo, że odwiedzający stronę zostanie Twój prawdziwy klient.
- Obecność interaktywnej mapy (w przeciwieństwie do mapy-obrazu) pozwala użytkownikowi lepiej orientować się w terenie, zobaczyć najbliższe metro, a kierowcy sprawdzić trasę na odległych podejściach do obiektu. Dodatkowo interaktywna mapa umożliwia oglądanie terenu z kosmosu.
- Otóż oczywiście potrzebna jest mapa na stronie, aby odwiedzający witrynę i klienci znali lokalizację Twojego sklepu, biura, magazynu.
Jak wstawić mapę Yandex do strony internetowej (instrukcje krok po kroku)
Powinien użyć Konstruktor Yandex.Maps API.
W tym artykule podajemy przybliżone instrukcje krok po kroku, co, mamy nadzieję, pomoże Ci wstawić mapę Yandex do Twojej witryny:
Krok 1. Wstępna konfiguracja mapy witryny Yandex:
- Otwórz stronę projektanta Yandex.Maps dla witryny.
- Znajdź żądaną lokalizację geograficzną na mapie według adresu lub ręcznie (za pomocą suwaka skalowania i przesuwając mapę myszą).
- Wybierz wagę, która jest wygodna do pracy. Ostateczną skalę lepiej ustalić na końcu pracy. Narysujemy etykiety na mapie, linie (drogi dojazdowe) oraz obrysy budynków lub terytoriów.
- W odpowiednim polu wpisz nazwę przyszłej karty.
- Przejdźmy do zestawu narzędzi serwisowych: przyciski do rysowania punktów (etykiet na mapie), linii, wielokątów (konturów) oraz wymiarów mapy.
Krok 2. Rysowanie punktów (znaków) na mapie:
- Kliknij przycisk do rysowania punktów.
- Umieszczamy znak (punkt) w miejscu, którego potrzebujemy. Na przykład w twoim biurowcu. Mapa witryny Yandex pozwala wstawić nie jeden, ale kilka tagów (na przykład, jeśli masz kilka sklepów, magazynów lub biur).
- Przechodzimy do ustawienia właściwości zainstalowanej etykiety (wstawianie tekstu, wybór koloru itp.).
Krok 3. Konfiguracja właściwości etykiety zainstalowanej na mapie:
- Klikamy bezpośrednio na narysowaną przez nas etykietę.
- W oknie, które się otworzy, wybierz potrzebne nam właściwości (kolor, numer tagu na mapie), wpisz żądany tekst (później tekst będzie widoczny dla użytkownika po kliknięciu tagu).
- Każdą etykietę można usunąć w odpowiednim polu właściwości.
- Wstawiliśmy więc etykietę twojego biura na mapie Yandex dla witryny, ustawiliśmy jej właściwości, teraz przystępujemy do rysowania linii. Na przykład linie podjazdu do biura.
Krok 4. Rysowanie linii na mapie:
- Kliknij przycisk rysowania linii.
- Klikając w mapę, otrzymujemy polilinię o dowolnej trajektorii. Można go użyć do obrysowania dowolnego obiektu lub narysowania trasy zbliżania się do obiektu.
- Przesuwając kwadratowe i okrągłe uchwyty, możesz edytować kształt linii.
- Analogicznie do etykiet, jeśli klikniesz na linię, pojawi się okno właściwości, w którym możesz ustawić kolor, grubość, przezroczystość linii, a także wpisać tekst, który będzie widoczny dla użytkownika.
- Przejdźmy teraz do rysowania wielokątów.
Krok 5. Rysowanie wielokątów wypełnionych kolorem konturu:
- Kliknij przycisk do rysowania wielokątów.
- W przeciwieństwie do linii, których można również użyć do obrysowania dowolnego wielokąta, te wielokąty są konturami z wypełnionym środkiem.
- Klikając na mapę, możesz narysować dowolny wypełniony wielokąt. Technika rysowania, edycji i ustawiania właściwości jest taka sama jak w przypadku rysowania linii.
- Przejdźmy teraz do zmiany rozmiaru mapy.
Krok 6. Zmiana rozmiaru mapy witryny:
- Kliknij przycisk zmiany rozmiaru.
- Przeciągając kwadratowe uchwyty wzdłuż konturu mapy, możesz zmienić rozmiar w razie potrzeby. To proste.
- Przechodzimy do ostatecznego tworzenia mapy.
Krok 7. Uzyskanie kodu mapy dla strony (Yandex):
- Ostateczny wygląd nadajemy mapie, ustalając ostateczną skalę mapy i końcowe położenie (współrzędne).
- Na tym etapie stworzenie mapy witryny (Yandex) można uznać za zakończone. Kliknij duży żółty przycisk „Zapisz i pobierz kod”.
- Nawet po zapisaniu mapy zawsze możesz wrócić do edycji.
- Należy pamiętać, że mapa może być nie tylko schematem, ale także fotografią z kosmosu, hybrydą lub elementem „Mapy Ludu”.
- Ponadto możesz stworzyć interaktywną mapę lub prosty obraz. Interaktywna mapa jest ciekawsza, bardziej funkcjonalna, ale może ładować się dłużej niż zwykły obraz. Wybór nalezy do ciebie.
- Możesz wstawić mapę Yandex do swojej witryny, umieszczając kod html mapy w żądanym miejscu na stronie.
Dziękujemy wszystkim czytelnikom zainteresowanym naszymi instrukcjami krok po kroku.
Tworzenie mapy dla witryny z Yandex to łatwe, niewymagające specjalnej wiedzy i umiejętności działanie na tle znacznie bardziej skomplikowanych problemów budowy witryny. Jeśli napotkasz poważniejsze trudności podczas tworzenia swojej strony, skontaktuj się z nami. Postaramy się jak najlepiej rozwiązać Twoje problemy!
Jeśli spodobała Ci się nasza instrukcja, możesz ją polecić znajomym i znajomym. „Przyciski społecznościowe” znajdują się po prawej stronie. To jest nasz mały interes własny.
