更新後にGoogleマップを拡大して中央に維持しますか？

Question

HTTPリフレッシュ後にGoogleマップにユーザーのビュー（ズームレベルと 中心点）を保持させるにはどうすればよいですか？

今すぐ更新するたびにビューがリセットされます。以下のコード を「ズーム：現在のズームレベル」と「センター：現在の中心 位置」と微調整することはできますか？

function initialize() { 
    var myLatLng = new google.maps.LatLng(0,0); 
    var myOptions = { 
    zoom: 2, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

私は http://test.barrycarter.info/sunstuff.htmlのためにこれを行うには、いくつかの他の方法を考え出したが、彼らはかなり難しく、すべて です。

Answer 1

このデータをクッキーに保存してから、値を取得するためにクッキーから読み取るか、クッキーが存在しない場合はデフォルト値を使用する必要があります。 zoom_changedにイベントリスナーを置き、map.getZoom()を使用して、ズームレベルをCookieに保存します。同様に、center_changedにイベントリスナーを持ち、map.getCenter()を使用して、中心点の座標をクッキーに保存します。または、おそらくそれらを両方ともbounds_changedにラップすることができます。

Answer 2

これを試してみてください：

// you could use the event listener to load the state at a certain point 
loadMapState(); 

// as a suggestion you could use the event listener to save the state when zoom changes or drag ends 
google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); 
function tilesLoaded() { 
    google.maps.event.clearListeners(map, 'tilesloaded'); 
    google.maps.event.addListener(map, 'zoom_changed', saveMapState); 
    google.maps.event.addListener(map, 'dragend', saveMapState); 
} 


// functions below 

function saveMapState() { 
    var mapZoom=map.getZoom(); 
    var mapCentre=map.getCenter(); 
    var mapLat=mapCentre.lat(); 
    var mapLng=mapCentre.lng(); 
    var cookiestring=mapLat+"_"+mapLng+"_"+mapZoom; 
    setCookie("myMapCookie",cookiestring, 30); 
} 

function loadMapState() { 
    var gotCookieString=getCookie("myMapCookie"); 
    var splitStr = gotCookieString.split("_"); 
    var savedMapLat = parseFloat(splitStr[0]); 
    var savedMapLng = parseFloat(splitStr[1]); 
    var savedMapZoom = parseFloat(splitStr[2]); 
    if ((!isNaN(savedMapLat)) && (!isNaN(savedMapLng)) && (!isNaN(savedMapZoom))) { 
     map.setCenter(new google.maps.LatLng(savedMapLat,savedMapLng)); 
     map.setZoom(savedMapZoom); 
    } 
} 

function setCookie(c_name,value,exdays) { 
    var exdate=new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
    document.cookie=c_name + "=" + c_value; 
} 

function getCookie(c_name) { 
    var i,x,y,ARRcookies=document.cookie.split(";"); 
    for (i=0;i<ARRcookies.length;i++) 
    { 
     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); 
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); 
     x=x.replace(/^\s+|\s+$/g,""); 
     if (x==c_name) 
     { 
     return unescape(y); 
     } 
     } 
    return ""; 
} 

Answer 3

私はクッキーを使用したくなかったので、私はのlocalStorageを使用して別の方法を作成しました。

HTML

<div id="map-canvas" style="width:100%;height:500px;"></div> 

JS

$(document).ready(function(){ 
    //Global Variables 
    var mapCentre; 
    var map; 

    initialize(); 

    function initialize() { 
     var mapOptions; 

     if(localStorage.mapLat!=null && localStorage.mapLng!=null && localStorage.mapZoom!=null){ 
      mapOptions = { 
       center: new google.maps.LatLng(localStorage.mapLat,localStorage.mapLng), 
       zoom: parseInt(localStorage.mapZoom), 
       scaleControl: true 
      }; 
     }else{ 
      //Choose some default options 
      mapOptions = { 
       center: new google.maps.LatLng(0,0), 
       zoom: 11, 
       scaleControl: true 
      }; 
     } 

     //MAP 
     map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 

     mapCentre = map.getCenter(); 

     //Set local storage variables. 
     localStorage.mapLat = mapCentre.lat(); 
     localStorage.mapLng = mapCentre.lng(); 
     localStorage.mapZoom = map.getZoom(); 

     google.maps.event.addListener(map,"center_changed", function() { 
      //Set local storage variables. 
      mapCentre = map.getCenter(); 

      localStorage.mapLat = mapCentre.lat(); 
      localStorage.mapLng = mapCentre.lng(); 
      localStorage.mapZoom = map.getZoom();  
     }); 

     google.maps.event.addListener(map,"zoom_changed", function() { 
      //Set local storage variables. 
      mapCentre = map.getCenter(); 

      localStorage.mapLat = mapCentre.lat(); 
      localStorage.mapLng = mapCentre.lng(); 
      localStorage.mapZoom = map.getZoom();  
     }); 
    } 
}); 

JSFiddleへのリンク：http://jsfiddle.net/x11joex11/G4rdm/10/

それは海の真ん中に始まるためだけでズームイン・ズームアウトでマップを移動再度実行したり、ページを更新したりすると、その覚えていることがわかります位置とズーム。

それはのlocalStorageにユーザが画面をパンやイベントメッセージ"center_changed"と"zoom_changed"