среда, декабря 09, 2009

Google Maps: как сохранять состояние карты при смене страницы

Сделано только что для развивающегося проекта Прим-Поиск.

Ситуация: страница с картой, по которой посетитель может перемещаться. Сходив на другие страницы и вернувшись на карту, он видит её в дефолтном виде, а не в том, в каком покинул. Раздражает.

Задача: сделать так, чтобы состояние карты сохранялось при повторном открытии страницы.

Решение: Очевидно, через cookies с использованием jquery.cookie (плагин гуглить).

1. Выносим объявление переменной карты в глобальный скоп:

Было:

$(document).ready(function(){
var map = new GMap2(document.getElementById('map_canvas'));
. . .

Стало:

var map;
$(document).ready(function(){
map = new GMap2(document.getElementById('map_canvas'));
. . .

2. Пишем функцию сохранения центра и зума карты в куки:

function save_map() {
var center=map.getCenter();
var lng=center.lng();
var lat=center.lat();
var zoom=map.getZoom();
$.cookie("map_state", lng+"_"+lat+"_"+zoom);
}

3. Прицепляем вызов этой функции при выходе, до гугловского сборщика мусора:

Было:

onunload="if (typeof(GUnload)!='undefined') GUnload();"

Стало:

onunload="if (typeof(GUnload)!='undefined') save_map(); GUnload();"

4. Проверяем куки перед инициализацией карты и выковыриваем сохранённые значения:

var saved_state=$.cookie('map_state');
if (saved_state!=null) {
var saved_vals=saved_state.split('_');
prim = new GLatLng(parseFloat(saved_vals[1]), parseFloat(saved_vals[0]));
zoom = parseInt(saved_vals[2]);
}
else {
prim = new GLatLng(44.68,134.0);
zoom=7;
}
map.setCenter(prim, zoom);

5. Заразо, работает! :-)

Комментариев нет:

Поиск по этому блогу