Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Zapewne nie jeden z (szczególnie początkujących) webmasterów spotkał się z problemem dodania interaktywnej mapy Google na stronie internetowej. Pomimo że nie jest to ogromnie trudnym zadaniem, przygotowanie całego procesu dla osób z małym doświadczeniem może stać się nie lada wyzwaniem.

Specjalne numery identyfikacyjne dla usługi Google Maps, dodatkowe fragmenty kodu JavaScript oraz złożona konfiguracja mapy z pewnością nie ułatwiają tu zadania.

Szczególnie, gdy tworzymy stronę WWW w oparciu o typowe narzędzia wizualne Dreamweavera, zaś programowanie HTML czy JavaScript nie jest naszą specjalnością.

Są jednak narzędzia, które proces osadzania mapy na stronie internetowej mogą skrócić do absolutnego minimum. Firma Webassist (www.webassist.com) przygotowała niewielki dodatek (Extension) do programu Adobe Dreamweaver, który doskonale sprawdzi się podczas takich działań.

Webassist Pro Maps for Google jak sugeruje nazwa to zestaw kilku ciekawych rozszerzeń Dreamweavera, które proces osadzania i użycia mapy Google na stronie zredukują dosłownie do kilku kliknięć myszką.

Moduł Webassist Pro Maps for Google jest częścią niezwykle potężnego pakietu rozszerzeń firmy Webassist – Super Suite. Może on być instalowany zarówno jako części całego zestawu narzędzi Webassist lub także jako całkowicie odrębne rozszerzenie.

Dreamweaver Extensions

Adobe Dreamweaver, podobnie jak inne programy firmy Adobe pozwala na użycie dodatkowych modułów rozszerzających możliwości programu.

W przypadku, programów Adobe wywodzących się bezpośrednio z firmy Macromedia (np. Flash, Dreamweaver), dodatki tego typu nie są nazywane Plug-inami, a zwykle występują pod nazwą Extension lub Component.

Każdy moduł dodatkowy – Extension zapisany jest w postaci pojedynczego pliku z rozszerzeniem .MXP. Do jego instalacji konieczne jest posiadanie darmowej aplikacji – Extension Manager, która instaluje się wraz z dowolnym programem Adobe.

Instalacja

Instalator programu Extension Webassist Pro Maps for Google dostępny jest w postaci pliku MXP. Jego użycie jest niezwykle proste.

Za pomocą dwukrotnego kliknięcia uruchamiamy program instalujący, który po wyrażeniu naszej akceptacji zainstaluje dodatek pośród innych dodatkowych narzędzi Dreamweavera.

Większość zainstalowanych dodatków (choć nie wszystkie) dostępne są do użycia za pomocą wygodnych przycisków widocznych w zakładkach panelu Insert.

Webassist Pro Maps for Google dostępny jest z paska Insert za pomocą zakładki Google. Naturalnie, w każdej chwili możemy także skorzystać z polecenia Insert>Google>Pro Maps. W obu przypadkach otwarte zostanie to samo okno konfiguracyjne.

Przy pierwszym uruchomieniu dodatku, konieczne jest wprowadzenie numeru seryjnego oraz aktywacja produktu.

Podobnie jak wiele innych nowoczesnych aplikacji, Webassist Pro Maps for Google zabezpieczony jest numerem seryjnym oraz internetową aktywacją. Sam proces instalacji oraz aktywacji trwa dosłownie moment i nie sprawia żadnych problemów.

Dzięki użyciu narzędzia Extension Manager, w każdej chwili możemy łatwo usunąć zainstalowany dodatek.

Dodajemy mapę Google

Aby dodać mapę Google na stronie WWW, możemy wykorzstać ogólny layout typowej strony naszego serwisu. Nie jest tu oczywiście istotne jakiej z jakiej technologii budowy strony korzystamy w naszej pracy. Program pozwoli dodać mapę zarówno do stron HTML ale także innych tworzonych z użyciem ASP czy PHP.

Już podczas planowania układu strony, warto zwrócić uwagę na maksymalne rozmiary mapy, jakie możemy zastosować tak, by nie zepsuć jej układu.

Mapa osadzona zostanie w miejscu wstawieniu kursora myszy, toteż jeśli chcielibyśmy umieścić ją w konkretnym miejscu na stronie, po prostu przechodzimy do tej sekcji i za pomocą przycisku Insert Map Pro dostępnego w zakładce Google na pasku Insert rozpoczynamy konfigurację mapy.

Konfiguracja mapy

Niewielkie okno dialogowe Pro Maps for Google, pozwala skrócić proces osadzenia mapy Google nawet do pięciu prostych kroków. W pierwszym oknie dialogowym, musimy wprowadzić kod zwany Google Maps API Key. Jest to standardowy proces osadzania wielu dodatków Google na stronie.

Oczywiście wielu z czytelników prawdopodobnie nigdy nie spotkała się z takim kodem i być może nie będzie wiedziała jak można go zdobyć. Dzięku użyciu Webassist Pro Maps for Google jest to bardzo proste.

Za pomocą odnośnika „click here”, łączymy się z witryną Google, logujemy do swojego konta i po wprowadzeniu adresu URL witryny, gdzie chcielibyśmy wykorzystać mapę otrzymujemy stosowny kod. Dla użytkowników dowolnej usługi Google proces ten trwa około 20 sekund! To rewelacja!

W kolejnym (drugim) kroku wprowadzamy adres/adresy lokalizacji, które chcielibyśmy przedstawić na naszej mapie. Za pomocą przycisku + dodajemy kolejne adresy i precyzyjnie określamy wszystkie niezbędne dane (ulica, numer, kod, miasto i kraj).

Możemy wskazać nawet kilka adresów jednocześnie. Każdy z nich prezentowany będzie jako osobna lokalizacja na naszej mapie.

Krok trzeci pozwala na określenie domyślnego wyglądu mapy na stronie. Możemy zmienić tu wygląd okna, jego kolorystkę oraz sposób prezentowania wskazanego adresu.

Doskonale znane domyślne ustawienia wyglądu mapy w większości przypadków nie wymagają dodatkowej modyfikacji.

Przedostatni (już czwarty) krok to bodaj najważniejsze ustawienia dotyczące prezentacji samej mapy na stronie. Tu właśnie określamy wielkość mapy oraz ilość dodatkowych kontrolek ułatwiających nawigację.

Wszystkie wprowadzane modyfikacje, są od razu widoczne w oknie podglądu. W znaczący sposób ułatwia to wybór właściwych parametrów.

Ostatni krok pozwala na określenie wskazówek dotyczących dojazdu do wskazanej na mapie lokalizacji. Nie jest to trudne, po prostu aktywujemy przycisk Driving Directions i wskazujemy odpowiednie dane.

W rezultacie użycia przycisku Finish kończymy konfigurację mapy i … gotowe.

Wszystkie dane konfiguracyjne naszej mapy zapisane są w odpowiednich plikach w obrębie naszego site’a. Dodatkowy folder folder – google_javascript, który zawiera wszystkie niezbędne informacje powstaje automatycznie w chwili dodania mapy na stronę.

O ile to konieczne, modyfikację ustawień mapy możemy wykonać ręcznie poprzez edycję kodu PHP/JavaScript w pliku wagmp_map_1.php lub wagmp_map_1.js (w zależności od wykorzystanej technologii podczas budowy sita).

Warto pamiętać by wraz ze stroną WWW zawierającą mapę także cały katalog o nazwie google_javascript przesłać na serwer internetowy. Tu bowiem zapisane są wszelkie dane konfiguracyjne naszej mapy.

Ocena

Muszę szczerze przyznać, że tak łatwego sposobu wykorzystania mapy Google na stronie internetowej nie widziałem nigdy wcześniej. Sposób edycji, konfiguracji mapy za pomocą Webassist Pro Maps for Google jest tak prosty, że nie ma możliwości by sprawił jakiekolwiek problemy nawet mniej doświadczonym użytkownikom programu Dreamweaver.

Serdecznie polecam użycie Webassist Pro Maps for Google w codziennej pracy.