Google Maps not functioning for me

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?

13.10.2009 23:19:06
What makes you think you're code is all "squared away and valid?" I get like 10 javascript errors by just loading the page.
Outlaw Programmer 13.10.2009 23:44:41
Are you editing the live website? Because, I don't see a Google Maps API script anywhere.
brianpeiris 13.10.2009 23:52:48
outlaw - I meant valid because it's literally copy/pasted from the Google API site, but still isn't working (due to a jQuery conflict I understand now)
dmanexe 14.10.2009 22:37:54
3 ОТВЕТА
РЕШЕНИЕ

Looks like you have conflict between jQuery and Prototype.

Use the noConflict mode of jQuery.

PS: Why are you using both?

3
13.10.2009 23:38:40

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;source=s_q&amp;hl=en&amp;geocode=&amp;q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&amp;sll=37.0625,-95.677068&amp;sspn=41.767874,58.535156&amp;safe=on&amp;ie=UTF8&amp;t=h&amp;hq=&amp;hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&amp;ll=38.764056,-121.330884&amp;spn=0.015209,0.020106&amp;z=16&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&amp;sll=37.0625,-95.677068&amp;sspn=41.767874,58.535156&amp;safe=on&amp;ie=UTF8&amp;t=h&amp;hq=&amp;hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&amp;ll=38.764056,-121.330884&amp;spn=0.015209,0.020106&amp;z=16" style="color:#0000FF;text-align:left">View Larger Map</a></small></div>
0
13.10.2009 23:40:02
Google Maps API fills in blank divs like that with a map. Including an IFRAME instead loses many of the advantages of the API, like custom layers, markers, etc.
ceejayoz 13.10.2009 23:45:05
+1 pythonquick, If the questioner only wants to display a basic map, the embedded iframe fits the bill.
brianpeiris 13.10.2009 23:54:15

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">
</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?

1
13.10.2009 23:54:29