Multiple google map not loading properly in IE8

437 views
Skip to first unread message

andrew Teng

unread,
Jun 5, 2011, 10:47:35 PM6/5/11
to google-map...@googlegroups.com
Hi everyone,
 
I have a list of location and i need to show all the location so i create a iframe and load the location page into the location.htm but in ie8 first map showing perfectly but the second and so on not showing properly. Can anyone help me?
 
Below is my script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="initialize()" style="background-color:none;">
<div style="float: left; width:520px; display: block;" name="newboxes" id="newboxes1">
     <script type="text/javascript">
   function initialize() {
       var myLatlng = new google.maps.LatLng(1.28872, 103.80569);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
   mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL
        },
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
   var contentString = '<div class="font12black">'+
   '<strong>LOCATION</strong>'+
   '</div>';
  var infowindow = new google.maps.InfoWindow({
   content: contentString
  });
   
  var marker = new google.maps.Marker({
   position: myLatlng,
   map:map,
  });
 
  infowindow.open(map,marker);
  
  google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
  });
  // To add the marker to the map, call setMap();
  marker.setMap(map);                          
 }
</script>
                       <div id="map_canvas" style="width: 330px; height: 300px; border: 2px solid #bbb;"></div>
             </div>
</body>
</html>
 

For the second map also the same script just the LatLng is different.
 
Thanks for the help.
 
 
Andrew Teng

 


Chris Broadfoot

unread,
Jun 5, 2011, 11:58:39 PM6/5/11
to google-map...@googlegroups.com
I only see one map in that code. Can you send a link to your page?


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/VG5ZRFlHYWhEd3NK.
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.



--
http://twitter.com/broady

andrew Teng

unread,
Jun 6, 2011, 3:29:49 AM6/6/11
to google-map...@googlegroups.com
Hi,
 
Attach is the htm files can you help me take a look in ie8.
 
For mozzila, chrone, safari all look ok.
 
 
Thanks
 
Andrew Teng
googlemaphelp.zip

andrew Teng

unread,
Jun 7, 2011, 12:57:38 AM6/7/11
to google-map...@googlegroups.com
Hi Chris,
 
Below is the link:
 
Thanks
 
Andrew Teng

Luke Mahé

unread,
Jun 7, 2011, 1:19:17 AM6/7/11
to google-map...@googlegroups.com
You have a javascript error on your page:
Uncaught ReferenceError: initialize is not defined

This means that the function initialize doesn't exist but you are calling it in your onload function.

-- Luke


 
Thanks
 
Andrew Teng

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

Pil

unread,
Jun 7, 2011, 6:10:59 AM6/7/11
to Google Maps JavaScript API v3
As far as I see you're trying to pile up three maps one uopn the other
at the same place on the page so that only the upmost one is visible.

Two of the subjacent maps are loaded into div using the css
display:none. So they are displayed only partially. Thats a FAQ. Try
to define a map size or trigger 'resize' as soon as they are made
visible.

A better and more efficient way would be to simply change the center
of one map.

andrew Teng

unread,
Jun 7, 2011, 6:23:15 AM6/7/11
to google-map...@googlegroups.com
Hi Pil,
 
This is the first time i try to use google map so i not really know what you mean sorry.
 
Andrew Teng

Pil

unread,
Jun 7, 2011, 6:58:22 AM6/7/11
to Google Maps JavaScript API v3
Ok, you are loading three maps at the same time but only one of them
is visible. The links above the map are changing the maps because
every map is showing its own content.

But in every case only one map is visible at the same time. So the
normal way would be to initialize one map and change its content
according to the clicked link.

andrew Teng

unread,
Jun 9, 2011, 11:34:41 AM6/9/11
to google-map...@googlegroups.com
Hi Luke,
 
I still cant solve the error... can you help me?
 
Andrew Teng

andrew Teng

unread,
Jun 9, 2011, 11:49:53 AM6/9/11
to google-map...@googlegroups.com
Hi,

Can anyone help me on this? i still cant solve this error.
 
Andrew Teng

Pil

unread,
Jun 9, 2011, 11:53:05 AM6/9/11
to Google Maps JavaScript API v3
Your page 'store.htm' (the parent document) uses

<body onload="initialize()">

altough there is no function initialize() in this page because all
your maps are loaded via iframes. This causes an error.

The parent document uses also

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>

although there is no map to load on this page. So all in all you're
loading the Maps API four times.

andrew Teng

unread,
Jun 9, 2011, 12:11:02 PM6/9/11
to google-map...@googlegroups.com
Hi Pil,
 
Thanks for the reply. I already remove the onload="initialize()" on the parent document and also the Maps API but the error still there.
 
Andrew Teng

Pil

unread,
Jun 9, 2011, 12:24:30 PM6/9/11
to Google Maps JavaScript API v3
I still can see it when loading this page

http://www.anzteng.byethost15.com/googlemap/store.htm

Maybe you are working on another copy.

andrew Teng

unread,
Jun 9, 2011, 12:35:12 PM6/9/11
to google-map...@googlegroups.com
Hi Pil,
 
Still the same. :(
 
Andrew Teng

Luke Mahé

unread,
Jun 9, 2011, 8:43:06 PM6/9/11
to google-map...@googlegroups.com
Your page is working fine, its just that your box is too small to see that the window is actually changing. All your maps are exactly the same except for what is written in the info window which is out of view.

-- Luke


 
Andrew Teng

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
Reply all
Reply to author
Forward
0 new messages