Wpis ten został przeniesiony na mojego bloga o podróżach i ciekawych miejscach. 




Zapraszam do przeczytania wpisu Fort Zachodni Twierdzy Świnoujście.

W zeszłym tygodniu ogłoszona została nowa funkcjonalność map statycznych Google Maps Static API, na którą wielu z nas czekało, i której brak był od razu zgłaszany przez wielu developerów.

Już teraz można tworzyć mapy statyczne z własnymi ikonkami . Wystaczy podać w adresie obrazka link do naszej ikonki – parametr icon. (link powinien być zakodowany do znaków html)

http://maps.google.com/maps/api/staticmap?center=54.352025,18.646638&zoom=9&size=200x200&markers=icon:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_tX-YvL23VlhC5VUMeM2TxuHjrQ3-ceFv-itGHDsqJeKpK7l7X4dXpLyi2wNww0IF9h848XoOQ3U4VUewGQtm4QAUpxwDHD79G9pm-WAcnPte1mGOUQR0y3Hf6COKuB0rPK_QQ4pYnI/s48/IMG_1227+600.jpg|54.352025,18.646638&sensor=false

Dzięki temu możemy tworzyć ciekawsze mapy na naszych serwisach, pokazywać ikonki użytkowników z ich pozycją itp. itd.

Co ciekawe, do naszych ikonek automatycznie dodawany jest cień i punkt zaczepienia ikonki obierany jest w środku dolnej krawędzi.

Jeśli nie chcemy dodać cienia, wystarczy ustawić parametr shadow:false, dzięki czemu nasza ikonka zostanie zaczepiona w jej środku.

http://maps.google.com/maps/api/staticmap?center=54.352025,18.646638&zoom=9&size=200x200&markers=icon:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_tX-YvL23VlhC5VUMeM2TxuHjrQ3-ceFv-itGHDsqJeKpK7l7X4dXpLyi2wNww0IF9h848XoOQ3U4VUewGQtm4QAUpxwDHD79G9pm-WAcnPte1mGOUQR0y3Hf6COKuB0rPK_QQ4pYnI/s48/IMG_1227+600.jpg|54.352025,18.646638|shadow:false&sensor=false

Warto wiedzieć jednak, że podobnie jednak jak na całą usługę Static Maps, na dodawanie własnych ikonek dodano pewne ograniczenia:

- ikonki nie mogą być większe niż 4096 pikseli (np. 64x64px)

- na jednej mapie statycznej nie może pojawić się więcej niż 5 różnych ikon (ale mogą być one wielokrotnie używane)

- jeśli w linku występuje znak „|” należy go zdekodować podwójnie do postaci „%257C”

O innych ograniczeniach przeczytaj w limity i ograniczenia usługi Google Static Maps.

Aby zmieścić się w limicie długości adresu obrazka można z powodzeniem skorzystać z serwisów skracających adresy url.

Istotną zmianą jest także ogłoszenie, że nie trzeba już podawać klucza Google w adresach naszych obrazków.

Dzięki temu nasze statyczne mapy będą poprawnie się pobierały i miały taki sam adres w każdym serwisie WWW i możemy więcej na nich umieścić. Zdecydowanie ułatwi nam to pracę :)

Czekam na inne ciekawe nowości :)

Każdy z tych, którzy kiedykolwiek musieli zrobić bardziej zaawansowaną stronę w pełni obsługiwaną w IE6 dobrze zna ogrom kłopotów z jakimi musi sobie poradzić, aby strona poprawnie się wyświetliła. Większość z nich związana jest z brakiem obsługi przezroczystości obrazków PNG. Problemy też czasem sprawia napisanie poprawnego kodu Javascript, który działałby w IE6 dokładnie w ten sam sposób co na nowszych przeglądarkach. Tworząc skrypty map Google wielokrotnie zachodziłem w głowę dlaczego nie działają one na IE6, ale tym razem nie o tym.

Jeszcze do niedawna tworzenie dynamicznych, dobrze wyglądających stron w IE6 polegało na dodawaniu specjalnych arkuszy stylów, obudowywanie obrazków dodatkowymi elementami blokowymi, które nierzadko burzyły porządek na stronie i przyprawiały o ból głowy.

W ostatnim czasie pojawiły się na szczęście skrypty, które wystarczy dodać do strony i automatycznie wykrywają one wszystkie obrazki i stosują do nich okrętki na przezroczystość. Pojawiło się ich kilka, przetestowaliśmy je i uznaliśmy, że do większości zastosowań najlepiej nadaje się DD_belatedPNG, która wykorzystuje VML, do przerysowywania obrazków.

Jego użycie ogranicza się w zasadzie do dodania skryptu w komentarzach warunkowych dla IE6 i zdefiniowanie selektorów CSS elementów, na których ma zadziałać, ale także wskazać wszystkie obrazki jakie występują na stronie, przykładowo:

O ile strona z zastosowanym fixem ładuje się szybko i wszystkie obrazki wyglądają prawidłowo, to jednak gdy dodałem na taką stronę mapę Google przestała ona działać. Mapa zainicjowała się prawidłowo, menu pokazało się, jednak żadne obrazki mapy nie zostały załadowane, a mapa nie pokazała żadnego błędu.



Po krótkim sprawdzeniu skryptów obsługi mapy okazało się, że z mapą jest wszystko w porządku, jednak problem tkwi właśnie w zastosowanym na stronie wspomnianym pngfixie. Zastosowanie fixa do wszystkich obrazków na stronie spowodowało zaprzestanie wyświetlania mapy na stronie.

Wynika to z tego, że Google stosuje własne algorytmy obsługi przezroczystości na mapie w IE6 w postaci filtru Microsoftowego AlphaImageLoader używanego dla każdego obrazka:

function Nk(a,b,c){ 
   a.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizi 
ngMethod="+(c?"scale":"crop")+',src="'+Sk(b)+'")' 
  }

Zastosowanie dodatkowo na już przekształconym obrazku po raz kolejny pngFixa DD_ belatedPNG powoduje zaprzestanie jego wyświetlania. Jest to ewidentnie konflikt obu bibliotek.

Na szczęście jest na to sposób. Wystarczy nie stosować pngfixa do wszystkich obrazków na stronie i zamiast deklarować ogólny selektor ‘body img’, stosować bardziej szczegółowe selektory elementów, w których wiemy, że nie będziemy mieli mapy Google.

Eksperyment potwierdziło usunięcie jednej linijki kodu:

DD_belatedPNG.fix("body img");

Mapa natychmiast pojawiła się na stronie :)



Warto o tym pamiętać tworząc strony w IE6, jeśli kiedykolwiek będziemy chcieli mieć na niej mapę Google.

Wpis ten został przeniesiony na mojego bloga o podróżach i ciekawych miejscach. 




Zapraszam do przeczytania wpisu Fort Anioła Twierdzy Świnoujście.