[Google Maps API v3] Google Maps JavaScript API v3 "Hello World" Blank Page

636 views
Skip to first unread message

TheSavant

unread,
May 20, 2010, 12:01:44 PM5/20/10
to Google Maps JavaScript API v3
Yes, I'm new- so please forgive me if this is a stupid question :)

I have literally copied the "Hello World" HTML from
http://code.google.com/apis/maps/documentation/javascript/introduction.html

All I get is a blank page when I try testing it- I'm sure that this
must be something very simple- why can't I see anything?
http://www.beaverlakeboaters.net/TEST.html

Thanks in advance!

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Marc Guay

unread,
May 20, 2010, 12:42:05 PM5/20/10
to google-map...@googlegroups.com
> All I get is a blank page when I try testing it- I'm sure that this
> must be something very simple- why can't I see anything?
> http://www.beaverlakeboaters.net/TEST.html

It looks like you need to define the size of map_canvas a little more
specifically. It's currently 100% of nothing. Try putting a pixel
amount in the height/width properties of the body or map_canvas.

Marc
MobilizeMe

Ralph Ames

unread,
May 20, 2010, 12:43:02 PM5/20/10
to google-map...@googlegroups.com
>http://www.beaverlakeboaters.net/TEST.html


Try using fixed width and height for the map size in pixels instead of
percentages.

<div id="map_canvas" style="width:100%; height:100%"></div>

<div id="map_canvas" style="width:600px; height:400px"></div>

Ralph

William

unread,
May 20, 2010, 3:47:54 PM5/20/10
to Google Maps JavaScript API v3
On May 21, 2:01 am, TheSavant <dkeithl...@gmail.com> wrote:
>
> I have literally copied the "Hello World" HTML fromhttp://code.google.com/apis/maps/documentation/javascript/introductio...
>
> All I get is a blank page
>
the problem is that you've got a strict html doctype at the start, but
the "hello world" example leaves out the doctype (and therefore runs
in quirks mode). In strict mode the browser calculates the 100%
height as zero (inherited from body) so you need CSS like this to see
the map:

<style type="text/css">
html,body {
height: 100%;
margin: 0px;
}
</style>

...
Reply all
Reply to author
Forward
0 new messages