Linki do innych serwisów mapowych
Ten poradnik będzie krótki i dość wyjątkowy pod względem treści. Skupimy się w nim na umożliwieniu oglądania aktualnego widoku mapy w innych, konkurencyjnych serwisach mapowych, takich jak Yahoo! Maps, Zumi.pl i Live Maps.
Przyciski pod mapą
Pod mapą dodane zostaną trzy przyciski, odpowiednio dla każdego serwisu:
<ul id="inne">
<li><a href="#" onclick="window.open(konwersja('yahoo',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Yahoo! Maps</a></li>
<li><a href="#" onclick="window.open(konwersja('zumi',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Zumi</a></li>
<li><a href="#" onclick="window.open(konwersja('live',mapa.getCenter(),mapa.getZoom(),mapa.getCurrentMapType())); return false;">pokaż w Live Maps</a></li>
</ul>
Funkcja konwersja() będzie przyjmować argumenty, na podstawie których wygenerowany zostanie adres danego serwisu mapowego z odpowiednimi parametrami. Potrzebne będą (kolejno): nazwa serwisu, współrzędne środka mapy, poziom przybliżenia oraz aktualnie wybrany typ mapy. Funkcję do generowania URL napiszemy za chwilę. Poniżej wypisany jest kod CSS, dzięki któremu trzy przyciski pod mapą będą milsze dla oka:
#inne
{
margin: 2px;
padding: 0;
list-style: none;
font-family: Tahoma;
font-size: 9px;
}
#inne li
{
float: left;
}
#inne li a
{
display: block;
padding: 2px;
width: 150px;
background: #ddd;
color: black;
text-decoration: none;
margin: 0 2px 2px 0;
border: 1px solid #777;
}
#inne li a:hover
{
border: 1px solid black;
background: #999;
color: white;
}
Funkcja, generująca adres
Napisanie samej funkcji jest bardzo proste, problematyczne może być jedynie skonwertowanie parametrów mapy Google na parametry map konkurencyjnych serwisów. Przykładowo, w serwisie Zumi jest tylko 10 poziomów przybliżenia, i są one numerowane rosnąco (tzn. im bliższy poziom przybliżenia tym mniejsza wartość numeryczna). Analogicznie, linki do serwisów będą różnić się nazwami zmiennych, ich kolejnością, formatem itp. Poniższa tabelka zbiera dane, które udało mi się empirycznie zaobserwować:
| parametr | Google Maps | Yahoo! Maps | Zumi.pl | Live Maps |
|---|---|---|---|---|
| dostępne poziomy przybliżenia | 1-19 (im większy numer, tym większe przybliżenie) | 2-18 (im większy numer, tym większe przybliżenie) | 1-10 (im mniejszy numer, tym większe przybliżenie) | 1-19 (im większy numer, tym większe przybliżenie) |
| dostępne typy map | mapa, satelita, hybryda, mapa fizyczna | mapa, satelita, hybryda | mapa, satelita, hybryda | mapa (road), satelita (aerial), hybryda |
| sposób konwersji poziomu przybliżenia (gdzie X to poziom przybliżenia w Google Maps) | - | = X - 1 | = 19 - X | = X |
| sposób konwersji trybu mapy | - | G_HYBRID_MAP: h G_SATELLITE_MAP: s G_NORMAL_MAP: m G_PHYSICAL_MAP: m |
G_HYBRID_MAP: 3 G_SATELLITE_MAP: 2 G_NORMAL_MAP: 1 G_PHYSICAL_MAP: 1 |
G_HYBRID_MAP: h G_SATELLITE_MAP: a G_NORMAL_MAP: r G_PHYSICAL_MAP: r |
| format adresu | - | https://www.zumi.pl/namapie.html?long=LNG&lat=LAT&type=TYP_MAPY&scale=ZOOM | https://maps.yahoo.com/#mvt=TYP_MAPY&lat=LAT&lon=LNG&zoom=ZOOM | https://maps.live.com/default.aspx?cp=LAT~LNG&style=TYP_MAPY&lvl=ZOOM |
Posiadające te informację jesteśmy w stanie napisać funkcję konwersja(), która zwróci odpowiedni adres URL:
function konwersja(typ,punkt,zoom,tryb)
{
var lat = punkt.lat();
var lng = punkt.lng();
if(typ=='zumi')
{
if(zoom>18)
var nowyzoom = 1;
else if(zoom<9)
var nowyzoom = 10;
else
var nowyzoom = 19-zoom;
if(tryb == G_HYBRID_MAP)
var nowytyp = 3;
else if(tryb == G_SATELLITE_MAP)
var nowytyp = 2;
else
var nowytyp = 1;
var url = 'https://www.zumi.pl/namapie.html?long='+lng+'&lat='+lat+'&type='+nowytyp+'&scale='+nowyzoom;
}
else if(typ=='yahoo')
{
if(zoom-1>18)
var nowyzoom = 18;
else if(zoom-1<2)
var nowyzoom = 2;
else
var nowyzoom = zoom-1;
if(tryb == G_HYBRID_MAP)
var nowytyp = 'h';
else if(tryb == G_SATELLITE_MAP)
var nowytyp = 's';
else
var nowytyp = 'm';
var url = 'https://maps.yahoo.com/#mvt='+nowytyp+'&lat='+lat+'&lon='+lng+'&zoom='+nowyzoom;
}
else if(typ=='live')
{
var nowyzoom = zoom;
if(tryb == G_HYBRID_MAP)
var nowytyp = 'h';
else if(tryb == G_SATELLITE_MAP)
var nowytyp = 'a';
else
var nowytyp = 'r';
var url = 'https://maps.live.com/default.aspx?cp='+lat+'~'+lng+'&style='+nowytyp+'&lvl='+nowyzoom;
}
return url;
}
I gotowe, teraz użytkownik może zobaczyć aktualnie oglądany obszar w swoim ulubionym serwisie (otwieranym w nowym oknie):