Google Maps JavaScript API v3 wont show on my ipad

BMC

unread,

Jan 3, 2011, 5:56:11 PM1/3/11

to Google Maps JavaScript API v3

I am trying to set up an api map v3 on my company's webpage but i
can't get it to come up on our ipad.
Is it true that you no longer need a key on the v3?
This is just the base map that i want to build from, adding markers
and info windows with pictures. I left out the rest of the page.

Am I writing the code wrong? I am a novice. Please, any feedback
will help.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 75% }
.auto-style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.3&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(28.1785, -98.2617);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:75%"></div>

geoco...@gmail.com

unread,

Jan 3, 2011, 6:16:58 PM1/3/11

to Google Maps JavaScript API v3

On Jan 3, 2:56 pm, BMC <blut...@gmail.com> wrote:
> I am trying to set up an api map v3 on my company's webpage but i
> can't get it to come up on our ipad.
> Is it true that you no longer need a key on the v3?

Yes that is true, no key is required for v3.

> This is just the base map that i want to build from, adding markers
> and info windows with pictures. I left out the rest of the page.

Please don't post code, post a link to the page:
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

>
> Am I writing the code wrong? I am a novice. Please, any feedback
> will help.

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

You might try a fixed size map div, that has fewer pitfalls for the
unwary.

Does it work everywhere else and just fail on the ipad, or does it
fail in other browsers on other operating systems?
What javascript errors do you get (if any)?

-- Larry

Mike Carlyon

unread,

Jan 3, 2011, 10:42:15 PM1/3/11

to google-map...@googlegroups.com

Here is a link.

http://www.miracleparkplace.com/index/pinMAPgallery.htm

It works in IE8 and firefox but it doesnt seem to work in safari (ipad).

and when I add the info window code the map stops working in everything.

--
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.

Chris Broadfoot

unread,

Jan 3, 2011, 11:07:38 PM1/3/11

to google-map...@googlegroups.com

Doesn't seem to work for me in Chrome either. My guess is a issue with webkit.

Try setting a height in a unit other than percent. My guess is the container of the map_canvas div has no height.

change:

#map_canvas { height: 75% }

to

#map_canvas { height: 400px }

Chris

Mike Carlyon

unread,

Jan 4, 2011, 2:48:37 PM1/4/11

to google-map...@googlegroups.com

yes, that worked! THANKS! you guys are a huge help.

Does anybody have any good recommendations for adding the info windows with text and pics?

I am going to be putting in a little over 100 markers.

Chris Broadfoot

unread,

Jan 4, 2011, 6:45:41 PM1/4/11

to google-map...@googlegroups.com

The recommendation is to keep only one instance of an InfoWindow, and change its position/anchor and content as necessary.