google map not initializing and resizing properly

Question

Google map initializing properly in my test page but not showing properly(full loaded) in my website.The map is not showing 100% width,just loading partially.After google searching i found that DOM is not properly loaded But showing full image when i click on firebug.I can not understand why it is happening.Though i used

google.maps.event.trigger(map, 'resize');

but desire result not found. My code

> <script>
> 
> var geocoder; var map; var marker; var marker2; var  marker3; 
> var infowindow = new google.maps.InfoWindow(); 
>
> function initialize() {  
> geocoder = new google.maps.Geocoder();   
>
> var latlng = new  google.maps.LatLng(51.5167,9.9167);   
>
> var mapOptions = {
>     zoom: 5,
>     center: latlng,   
>     zoomControl: true,    
>      mapTypeId: google.maps.MapTypeId.ROADMAP,    
>     zoomControlOptions: {
>                  style: google.maps.ZoomControlStyle.LARGE,
>                  position: google.maps.ControlPosition.TOP_left
>              }   
>       }
>      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
>      google.maps.event.trigger(map, 'resize');   
<!--click  event-->  
> google.maps.event.addListener(map, 'click', function(event)
> {
>     
>   geocoder.geocode({'latLng': event.latLng}, function(results, status) 
>       {if (status == google.maps.GeocoderStatus.OK) {
>             if (results[0]) {
>               
>               if(marker3)
>               {  
>                 //alert(results[0].geometry.location);
>                 //alert(event.latLng);
>                 marker3.setPosition(event.latLng); 
>               }
>               else{
>               marker3 = new google.maps.Marker({
>                   position: event.latLng,
>                   map: map,
>                   draggable: true
>               });
>               }
>               infowindow.setContent(results[0].formatted_address);
>               infowindow.open(map, marker3);
>                
>               //alert(results[1].formatted_address);
>               //alert(results[0].formatted_address);
>             } else {
>               alert('No results found');
>             }             } else {
>             alert('Geocoder failed due to: ' + status);           }
>         });
>   
>   
>      });    <!--click event-->    }); }
> 
> google.maps.event.addDomListener(window, 'load', initialize); $(
> document ).bind( "pageshow", function( event, data ){
> google.maps.event.trigger(map, 'resize'); });




<div class="create-a-tour-map1" id="map-canvas" style="float:right;
 width:317px; height:296px;;margin: 0.6em;"></div>

You should format it as code: http://stackoverflow.com/help/formatting — geocodezip, Dec 24 '13 at 13:48

score 3 · Answer 1 · edited May 23 '17 at 12:30

You should probably just change "pageshow" to "load" or "ready" in the event binder.

 google.maps.event.addDomListener(window, 'load', initialize); 
 $(document).bind( "load", function( event, data ){
    google.maps.event.trigger(map, 'resize'); 
 });

But personally I would use this:

$(window).load(function(){ 
  initialize();
  google.maps.event.trigger(map, 'resize'); 
});

This will register an event listener on the 'onLoad' event, which when fired first executes initialize() then after that trigger's a resize on the map. The problem with your code is that 'pageShow' is fired before the window's onLoad event, so it trigger's a resize on a non-existing map. Opening firebug probably fires a 'pageShow' event causing your map to resize. In conclusion don't use the 'pageShow' it's not supported in al browsers (read here: pageShow event in javascript)

Hi Raz0rwire, When i enabling firebug(F12) ,the map loaded fully. — user1987095, Dec 24 '13 at 12:42
Raz0rwire,my script is correct,problem was on click event .actually i showing google map in tab though it is initializing before the tab being clicked that's why the problem occurring.So i fixed it by replacing show/hide to visibility hidden/visible.thank for your time patient — user1987095, Dec 26 '13 at 11:40

google map not initializing and resizing properly

1 Answers1