Display map onload and onclick render differently?

JiminSA · Dec 20, 2012

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

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 · Dec 20, 2012

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

ckphilli · Dec 20, 2012

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 · Dec 20, 2012

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

Display map onload and onclick render differently?

JiminSA

JiminSA

ckphilli

JiminSA

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

Welcome to Tech Support Guy!

Latest posts

Staff online

Members online