Question

I have a link on my website that says “Fullscreen Google Map”. Once I click it, I load a google map into a 100% wide and 100% high position fixed div container. When the link is clicked, I also add a #map as hash.

Is it possible to make the browser back button work with that? That is, if I click this link, I add #map to my current address. Once I click the back button, the #map hash is removed and the div container with the google map is removed or hidden.

Is that somehow possible?

edit:

$('.showMapLink').live('click', function() {

    $('#mapContainer').fadeIn('fast', function () {
        loadMap("mapContainer");

        top.location.hash = "map";
        $(window).bind( 'hashchange', function( event ) {
            $('#mapContainer').fadeOut('fast', function () {
                $(this).children().remove();
            })
        });

    });

});

Answer 1

A great resource and plugin to help with this is Ben Almans bbq plugin, It will help you set and read the hash part of the url (eg see pushState and getState) and it provides a hashchange event that works across browsers.

Handle the hashchange event and do your processing in there. You need to manually trigger the event the first time the page loads.

$(document).ready(function(){

    $(window).bind( 'hashchange', function( event ) {

        // show/hide map here. this will vary depending on what you use in the url

        if (window.location.hash == "map"){
            $('#mapContainer').fadeIn('fast', function () {
               loadMap("mapContainer");
            });
        } else {
            $('#mapContainer').fadeOut('fast', function () {
                $(this).children().remove();
            })
        }

    });

    $('.showMapLink').live('click', function() {
        top.location.hash = "map";
    });

    $(window).trigger("hashchange");

});