Grow your CSS skills. Land your dream job.

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

  • # November 17, 2012 at 3:04 am

    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.

    # November 17, 2012 at 9:53 pm

    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

    # November 19, 2012 at 2:35 am

    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?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".