Oct 26, 2009

Inidividual Project

I have been working on our individual project to add Google maps to my site. I really have had no problem adding the API to my page, but when I do I have problem with the rest of the page. This is my page before I add Google maps:



Basically how I have it set up is the description below the pictures comes up asynchronously when you click on a particular picture. I added information about each of the lakes in case someone may be interested in visiting one of them. I wanted to add the map to the left so that people could either see where the lake was or so they could get directions to each individual lake. The problem that I am running into is when I add the map I have to change the body tag to


in order to allow the page to fully load before the map is placed on the page. As you can see from my current webpage, now that I have the map on my page I can not get the information to come up. The only time that I can get it to come back up is if I change the tag back.

Is there anyone that could possibly guide me on what else I could try to get my asynchronous requests to work? I know that we are supposed to have a proxy pass through for the second iteration, but now that I started to do this it is bugging me why I can't figure it out. I am thinking that I may just need to step away for a moment in order to think about it, but I thought if anyone had anymore experience with Google maps they may know how to remedy the situation.

4 comments:

  1. Michelle,
    A couple things:
    1. The picture of Lake George is over 2MB, this should be compressed down to under 100k to allow for users with slower internet connections to not have to wait for the download.
    2. You can move the initialize() function call into your javascript and call it by using window.onload = initialize();
    Lets see what you get when you move the script

    ReplyDelete
  2. Hey Michelle,
    I didn't have any problems with Google Maps interfering with my other AJAX calls, but I think I see an area where your code might be having a problem. In your JS, you have a function called "initPage." Now based on that name, I assume you originally had that in your "< body onload='initPage()'>"....Is that correct? If you did, then you need to put it back in there so that it will initialize when the page loads. You are able to have to functions in the same call, so you could type something like:

    < body onload="initialize(); initPage();" onunload="GUnload()">

    There are other options as well, but this is probably the easiest solution for you to get your requests back up and working. If that still doesn't fix it, let me know and I'll look at it again if you want. I'm also a little confused with the URL you are creating in the onclick function...it appears to be adding '-jpg' when it seems like you'd want '.jpg' I can't tell exactly what you're trying to do there though, so maybe I'm just mis-reading it. Anyway, hope that helps!

    ReplyDelete
  3. Hey Michelle,
    I just tried to get your files(but I was not able to download the php file). After looking at your coude I changed the sript by starting "initPage()" from "initialize()" :

    ##function initialize() {
    ## initPage(); ....
    ## }

    the HTML File:
    ## < body onload="initialize()" onunload="GUnload()">


    I was not able to try everthing because of the missing PHP file, but I think this must work.

    ReplyDelete
  4. you've made a huge step from iteration 1 to your final iteration. You did a good job with the site and was i was very impress how you could click on the picture and it will show the weather and the location on the google maps.

    ReplyDelete