treehouse : what would you like to learn today?
Web Design Web Development iOS Development

(Dynamic Page / Replacing Content) + google map not loadong on hashchange?

  • First off I would like to thank ccs-tricks for the awesome Dynamic Page / Replacing Content tutorial. It works awesome for what I need. I dig it. Here is the link to the tutorial I used for the code in my site. http://css-tricks.com/dynamic-page-replacing-content

    I have one question though. On my contact page I would like to have a google map. The map loads without the hash in the url, when navigated to with hash the map fails to load.

    The google map uses "window.onload = initializeGoogleMap('mapCanvas');" and I'm thinking that it is the "onload" not firing because the page is already loaded. I'm new to javaScript so i really don't know for sure. I was thinking if that is where things are failing i should use some logic to ask if there is a hash in the url something like

    if(window.location == "contact.html"){
        window.onload = initializeGoogleMap('mapCanvas');
    }elseif(window.location == "#contact.html"){
        someEvent? = initializeGoogleMap('mapCanvas');
    } 
    

    I don't know the proper event or how to properly ask if(window.location == "#"). I have tried to call the initializeGoogleMap('mapCanvas') function in the body without the onload event but that fails with hash but loads just fine without # as well.

    All help is appreciated Thanks.

  • To check if there is a hash in the URL you can do this:

    if(window.location.hash) {
        // there is a hash
       // to get the hash value as a variable:
       var hash_value = window.location.hash.substring(1)
    }
    else {
        // no hash...
    }
    

    Hope that helps

  • Thanks, it helped me learn how to get the hash value of the URL. But I still have the same problem of scope. Since the window and the body are not being reloaded no functions are fireing on hashed URL's.

    Is there a way to addEventListener() to a div and on change to say innerHTML fire off desired functions?