Google Maps Remember Last location

Description

A demonstration of two methods for saving and reloading a position on a Google Map. This allows a preset location to be brought up quickly without the user spending time remembering or panning and zooming to the position. A position is assumed to be a combination all all the following:

• Latitude
• Longitude
• Level of Zoom
• MapTypeId

How To Use

1. Once the map has fully loaded on the page, pan and zoom to find a particular location
2. Click Save
3. Move the map to somewhere else
4. Click Load
5. The map should return to its saved state
6. Then try navigating away from this page and then try to load again

How it Works

The code use save and load the location is...

var map;
function initialize()

  {

  var latlng = new google.maps.LatLng(0,0);

  var myOptions = {zoom:1,center:latlng,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},draggableCursor:'crosshair'};

  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  mapDiv.innerHTML='Page Loaded';

  }
function Save()

  {

  var mapzoom=map.getZoom();

  

  var mapcenter=map.getCenter();

  var maplat=mapcenter.lat();

  var maplng=mapcenter.lng();

  var maptypeid=map.getMapTypeId();

  

  var cookiestring=maplat+"_"+maplng+"_"+mapzoom+"_"+maptypeid;

  

  var exp = new Date();     //set new date object

  exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * 30));     //set it 30 days ahead

  

  setCookie("DaftLogicGMRLL",cookiestring, exp);

  mapDiv.innerHTML='Saved';

  }
function Load()

  {

  var loadedstring=getCookie("DaftLogicGMRLL");

  var splitstr = loadedstring.split("_");

  

  var latlng = new google.maps.LatLng(parseFloat(splitstr[0]), parseFloat(splitstr[1]));

  map.setCenter(latlng);

  map.setZoom(parseFloat(splitstr[2]));

  map.setMapTypeId(splitstr[3])

  mapDiv.innerHTML='Loaded';

  }
function setCookie(name, value, expires) 

  {

  document.cookie = name + "=" + escape(value) + "; path=/" + ((expires == null) ? "" : "; expires=" + expires.toGMTString());

  }
function getCookie(c_name)

  {

  if (document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name + "=");

  if (c_start!=-1)

  { 

  c_start=c_start + c_name.length+1; 

  c_end=document.cookie.indexOf(";",c_start);

  if (c_end==-1) c_end=document.cookie.length;

  return unescape(document.cookie.substring(c_start,c_end));

  } 

  }

  return "";

  }

Advantages and Disadvantages

• A: Can save location even if the user leaves the page and comes back
• D: Require extra javascript
• D: Uses cookie which can be blocked or deleted on the client machine
• A: Available for customised expansion i.e. remember additional data such as...
  • a name for that saved location
  • multiple saved locations
  • The map state (Map /Satellite / Hybrid)

Relvent Links

Goggle Maps API

Version History

• Version 1 (16/12/2008) - Initial Versoin
• Version 2 (09/11/2013) - Implemented Google Maps API V3. Now saves getMapTypeId as well.