1

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 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.

user1517446
  • 25
  • 4

2 Answers2

0

What you are looking for is to generate 'Deeplinks'

http://en.wikipedia.org/wiki/Deep_linking

You can do it on the client-side.

I would suggest using a good JS framework that interprets the url correctly and produces the same results.

E.g.

http://angularjs.org/

http://backbonejs.org/

I dont have enough experience with Google Maps, but your JS Framework should make calls to GoogleMaps(possibly AJAX), and generate the unique URLS

These unique URLs can then be used to trackback to your application. When your framework, interprets the URLs correctly, they should make the same API calls to GoogleMaps, it did the 1st time to generate the URLs.

Abhishek Mehta
  • 1,447
  • 1
  • 14
  • 16
0

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.

josh3736
  • 139,160
  • 33
  • 216
  • 263
  • Should I be putting the pushState function into my mapSearch function? – user1517446 Jul 18 '12 at 07:11
  • Assuming `mapSearch` is the function that actually runs the query against Google Maps, the only thing that should call `mapSearch` is the `hashchange` handler. Anything that would initiate a search (such as a button) calls `pushState` with the search term, which in turn fires `hashchange`. – josh3736 Jul 18 '12 at 13:57
  • I have tried to implement this in my code, but I get this error: [link](http://stackoverflow.com/questions/11597631/deep-linking-using-bbq-plugin) – user1517446 Jul 22 '12 at 04:35