We help IT Professionals succeed at work.

JavaScript Page Load issue

detox1978
detox1978 asked
on
Medium Priority
177 Views
Last Modified: 2012-05-06
Hi All,


I have written some JavaScript to resize a Google Map.

This works fine, but the map doesn't fill the DIV when the page first loads.  

If the page is resized it works.


Any suggestions where i'm going wrong?


http://www.wedding-site.org/venues/test.htm
Comment
Watch Question

Commented:
I think you should create the map after the page has finished loading, by setting the body's onload event. Something like:
<body onunload="GUnload()" onload="GLoad()" >
 
// and in GLoad() you put this stuff:
 
function GLoad() {
   if (GBrowserIsCompatible()) { 
 
  
          function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            return marker;
          }
 
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          
          // start location and zoom level, the higher the number the closer the zoom
          map.setCenter(new GLatLng(52.5,1.25),8);
        
           
                    // creates the markers
                      var point = new GLatLng(52.1943,-0.23535);
                      var marker = createMarker(point,'Location One')
                      map.addOverlay(marker);
                      var point = new GLatLng(52.11672,0.22947);
                      var marker = createMarker(point,'Location Two')
                      map.addOverlay(marker);
                      var point = new GLatLng(52.76908,-0.37751);
                      var marker = createMarker(point,'Location Three')
                      map.addOverlay(marker);
        
        } else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
 
}

Open in new window

Author

Commented:
I've updated the file, but it's not working?
Commented:
Tried it. This works for me:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAwU9G-ccz2rlXFfGkz704yBS4MVJvri3K5LpnC4nsMCt9q1zdHhRGMyW83u2QhywfZs_xCL0yS7ZwBQ" type="text/javascript"></script>
 
 
 
<script type="text/javascript">
 
 
function GLoad() {
	my_div=document.getElementById("map") 
      my_div.style.height=document.body.clientHeight - 200
      my_div.style.width=document.body.clientWidth - 200
	
   if (GBrowserIsCompatible()) { 
 
  
          function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            return marker;
          }
 
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          
          // start location and zoom level, the higher the number the closer the zoom
          map.setCenter(new GLatLng(52.5,1.25),8);
        
           
                    // creates the markers
                      var point = new GLatLng(52.1943,-0.23535);
                      var marker = createMarker(point,'Location One')
                      map.addOverlay(marker);
                      var point = new GLatLng(52.11672,0.22947);
                      var marker = createMarker(point,'Location Two')
                      map.addOverlay(marker);
                      var point = new GLatLng(52.76908,-0.37751);
                      var marker = createMarker(point,'Location Three')
                      map.addOverlay(marker);
        
        } else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
}
</script>
</head>
<body onunload="GUnload()" onload="GLoad()" >
 
<div id="map" style="border: 1px solid #000; position: absolute; bottom: 0px; right: 0px;"></div>
 
</body>
</html>

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
that works, thanks....

Commented:
The page you linked there looks good in Opera and IE at least. Map fills the div

Commented:
=) np
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.