Display map onload and onclick render differently?

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

JiminSA

Jim
Thread Starter
Joined
Dec 15, 2011
Messages
3,407
I am displaying a map when the address is present in the db.
If I get the map using onclick (I would prefer an automatic render) it displays just fine.
If I get it using body onload, it displays the bottom-right-hand-corner in the top-left-hand-corner of the container:confused:
The js functions called to perform the displays are here...
HTML:
<script type="text/javascript">
       var geocoder;
       var map;      
       function initialize() {
              
         geocoder = new google.maps.Geocoder();     
         var latlng = new google.maps.LatLng(-26.204102800000000000, 28.047305100000017000);     
         var myOptions = {       
           zoom: 12,       
           center: latlng,       
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     }
   
       function codeAddress() {
         var address = document.getElementById("address").value;
         geocoder.geocode({'address': address},function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
             var marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
       });
         } else {
           alert("Geocode was not successful for the following reason: " + status);
         }
       });   
     }   
</script>
here's the body onload...
HTML:
<body onLoad="javascript:preloader();initialize();codeAddress();">
and here's the onclick...
HTML:
<input type=\"button\" value=\"Generate Map\" onclick=\"initialize();codeAddress();\">
which is echo'd out - hence the escaping chars.

Any insights would be appreciated...:)
 

JiminSA

Jim
Thread Starter
Joined
Dec 15, 2011
Messages
3,407
It's OK - after a little research I discovered that google maps doesn't like being in a hidden div (which is where it was). So as a shortcut solution (lazyman's) I took it out and made it a popup...
I'd still love to know how to talk google maps into handling hidden maps, though:( (and maybe some hidden treasure:)) So I'll leave it unsolved for now...
 
Joined
Apr 29, 2006
Messages
4,393
Jim, I am really not a fan of inline calls,l they have caused issues for me in the past...maybe try below and see how it reacts with the hidden stuff...

Code:
$(document).ready(function() {
  //put your entire script here
});
OR
Code:
//your script
window.onload = //your functions
OR

Code:
//your script
$(document).ready(function() {
  //function();
  //function2();
});
Here's a little more speak on it: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

Also...not seeing preloader() in your script.

EDIT: obviously...
Code:
<body onLoad="javascript:preloader();initialize();codeAddress();">
becomes
Code:
<body>
 

JiminSA

Jim
Thread Starter
Joined
Dec 15, 2011
Messages
3,407
Thanks for the tip Chris, I'll see what the effect of running the functions prior to body onload has on the google map render and let you know:)
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top