Google Maps not functioning for me

Question

Hey all,

My Google maps code is all squared away and valid, but it doesn't load on the page. Here is the page in question, I have full availability to code, not sure why it's breaking:

http://whs.rjuhsd.us/calendar/map

The Gmaps JS is in the header, with the correct key. Sensor is set to true, and the element is defined in the document, displayed properly, in the right spot and available to the user.

Halp?

Answer 1

Looks like you have conflict between jQuery and Prototype.

Use the noConflict mode of jQuery.

PS: Why are you using both?

Answer 2

I see two links to google maps, but I assume you want to display a google map as part of this page right?

There's an empty DIV on your page:

<div id="map_canvas" style="width: 500px; height: 300px;"></div>

Maybe this is where you intended to embed the map? If so, you can try to replace it with the following:

<div id="map_canvas" style="width: 500px; height: 300px;"><iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=41.767874,58.535156&amp;amp;safe=on&amp;amp;ie=UTF8&amp;amp;t=h&amp;amp;hq=&amp;amp;hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&amp;amp;ll=38.764056,-121.330884&amp;amp;spn=0.015209,0.020106&amp;amp;z=16&amp;amp;output=embed"&gt;&lt;/iframe&gt;&lt;br /><small><a href="http://maps.google.com/maps?f=q&amp;amp;source=embed&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=41.767874,58.535156&amp;amp;safe=on&amp;amp;ie=UTF8&amp;amp;t=h&amp;amp;hq=&amp;amp;hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&amp;amp;ll=38.764056,-121.330884&amp;amp;spn=0.015209,0.020106&amp;amp;z=16" style="color:#0000FF;text-align:left">View Larger Map</a></small></div>

Answer 3

Chetan is right, you are running into a conflict between jquery and Prototype. I see that you have called jquery.noConflict() once, but then after that you import jquery again into your document, thus undoing the noConflict:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;
</script>
        ... snip ...
        <!-- following scripts are for the jwPlayer installations oct.09 -->
        <script type="text/javascript" src="/scripts/swfobject.js"></script>
        <script type="text/javascript" src="scripts/jwplaylist/jquery-1.3.2.min.js">
    </script>

Is there any reason why you didn't just update the swfobject.js to use the earlier version of jquery?