?
Solved

JavaScript Page Load issue

Posted on 2009-02-13
7
Medium Priority
?
169 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
0
Comment
Question by:detox1978
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:Blomholm
ID: 23638616
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

0
 
LVL 2

Author Comment

by:detox1978
ID: 23638632
I've updated the file, but it's not working?
0
 
LVL 3

Accepted Solution

by:
Blomholm earned 1000 total points
ID: 23638633
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

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:detox1978
ID: 23638637
0
 
LVL 2

Author Comment

by:detox1978
ID: 23638646
that works, thanks....
0
 
LVL 3

Expert Comment

by:Blomholm
ID: 23638647
The page you linked there looks good in Opera and IE at least. Map fills the div
0
 
LVL 3

Expert Comment

by:Blomholm
ID: 23638650
=) np
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question