Google Maps Remember Last location

Using cookies via Javascript

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.

Comments For This Page

Great job with the example, and thanks for fixing it. It's working on my map right now. I have a FusionTable layer in my map so is there any way to save the mapped markers from the layer?
By Jesse on 16th January 2014
Jesse, thanks for reporting. It's now fixed.
By Daft Logic on 15th January 2014
I would love to see this in action but the map isn't viewable.
By Jesse on 15th January 2014
On 24/10/2013, save a cookie with the map center and zoom level everytime a relevant change event on the map occurs. The check for it an load the values on page load.
By Daft Logic on 27th October 2013
how would you use the cookie to open a new page/map to the same zoom level/location?
On 24th October 2013
How to delete the the saved cookie?

i tried this;

createCookie(cookiename,"",-1);

but wasn't able to delete the saved cookie.

Any idea?

By mrana on 7th July 2012
Great job on formatting the code!
By Meh on 25th June 2012
Hi

Would it be that hard to enable the user to save multiple maps and load them at another vist
By Lee on 29th June 2009
Hi there, thanks for your help earlier. I have 2 questions

1. When the page loads the map will only work properly if you with the reset icon, otherwise the drag and zoom options seem really sensitive. Any ideas. Page can be found here http://www.vineyardroads.co.nz/cookieresults.php?id=1&tastings=0&Submit=Search

2. On this site I have one map page used for 17 regions, if I use your code, it remembers the location for 1 map and if you choose another region it loads up the previous maps location. How do I save multiple cookies for each location (or save multiple sets of data in the same cookie?)

Thanks in advance

Steven
By Steven on 29th June 2009
Try using the event http://code.google.com/apis/maps/documentation/reference.html#GMap2.moveend to call the Save function.
By Daft Logic on 13th February 2009
Hi there, great work with maps, I am wanting to do the same, but dont want to have the user clicking save buttons. Is there a way for the cookie to be updated verytime the maps is zoomed or moved? So if the user navigates away, they can come back to the same place

Cheers

By Steven on 11th February 2009

Add your own comment below and let others know what you think: