Question

I’m not sure if this can be done in javascript without any server.

Basically, I’m using Google Maps API to generate certain search results on the same page, and I want to be able to create a share button so that when the user clicks on it, it will generate a custom link like http://www.example.com/?search=Anaheim. Then, when the user, or another user, types that url into the address bar, it will result in a page with those results.

Right now, I am only doing the search on one html page, and I’m not sure how to make it so that by entering the link, it can maybe change the default home location of my one html page? Or, is this imposible, and I should be doing something else?

Any advice will be greatly appreciated. Thanks!!

Edit: This is probably kind of confusing to understand.. But basically, I want to be able to generate links in the same way that google maps generates them when you click on the link button.

Answer 1

jQuery BBQ (API docs) is my favorite tool to accomplish this.

Simply add an event listener for hashchange:

$(window).bind('hashchange', function(e) {
    var q = $.bbq.getState('q');
    if (q) {
        // do your Google Maps search for `q`
    }
});

And trigger a hashchange when the page first loads. (The event isn’t fired automatically on page load, only when the URL is changed — whether programmatically or by the user fiddling with the URL)

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

Now opening example.com/#q=Anaheim will search for Anaheim.

For bonus points: I assume your page has a text box that calls a function when the user presses enter (and/or clicks a button). Instead of directly calling your search function, use pushState to add the search term to the URL. (Your page won’t reload.) This will make it instantly bookmarkable since the user can either add the page to their bookmarks or copy the URL from the browser’s address bar.

// on key 13 / search button click:
$.bbq.pushState({ q: $('#searchTerm').val() });

That’s all you need. The hashchange handler picks up from there.