See https://developers.google.com/maps/documentation/javascript/v2/reference#GMap2.checkResize
that should be called to let the map know something has changed. Note however the component is using the Deprecated v2 - due to be turned off in a few months time. On Wed, Jan 23, 2013 at 2:26 PM, Johan van der Meer <[email protected]> wrote: > I'm stuck with a issue regarding maps. I'm using the Joomla component > Listbingo, and made a order form with hidden divs and steps. > > In the second step Google Maps has to show up, but it is not rendering on > the right way. Some parts are gray, and the location is not correct. Now i'm > understanding that google maps is not happy with hidden divs, but i cannot > resolve this issue with the answers that already bin given. > > Hope someone can help me :) > > <script > > src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<?php > echo $this->params->get('map_api_key');?>" > type="text/javascript"></script> > <script type="text/javascript"> > //<!-- > var map; > var marker; > var markeradded=false; > var markerfixed=false; > var current_point; > var catIcon; > > > function initialize() > { > if (GBrowserIsCompatible()) > { > map = new GMap2(document.getElementById("map_canvas")); > map.setUIToDefault(); > map.disableScrollWheelZoom(); > geocoder = new GClientGeocoder(); > > > } > } > > window.addEvent('domready',function() > > { > > initialize(); > //var mapSlider = new Fx.Slide('gb_maplocator', {duration: 1000}); > var mapSlider = document.getElementById('gb_maplocator'); > //var mapSlider = $('gb_maplocator'); > > <?php if( $this->data->published==0){?> > mapSlider.style.visibility = 'hidden'; > mapSlider.style.height = '0px'; > mapSlider.style.overflow = 'hidden'; > <?php } ?> > > > $$('.gb_map_controls').addEvent('click',function(){ > if(this.getProperty('value')==1) > { > mapSlider.style.visibility = 'visible'; > mapSlider.style.height = 'auto'; > > > } > else if(this.getProperty('value')==0) > { > mapSlider.style.visibility = 'hidden'; > mapSlider.style.height = '0px'; > mapSlider.style.overflow = 'hidden'; > } > }); > > $('btnAddtomap').addEvent('click', > function(e) { > $('map_level').value=map.getZoom(); > $('map_glat').value=current_point.lat(); > $('map_glng').value=current_point.lng(); > }); > > > > GEvent.addListener(map, "zoomend", > function(oldlevel,newlevel) { > $('map_level').value=newlevel; > }); > > GEvent.addListener(map, "dragend", > function() { > current_point=map.getCenter(); > }); > > <?php > if( $this->pin->map_image ) > { > ?> > catIcon = new GIcon(); > catIcon.image = '<?php echo > JUri::root().$this->pin->map_image.".".$this->pin->extension;?>'; > catIcon.shadow = '<?php echo > JUri::root().$this->pin->shadow_image.".".$this->pin->extension;?>'; > //catIcon.iconSize = new GSize(25.0, 32.0); > //catIcon.shadowSize = new GSize(42.0, 32.0); > catIcon.iconAnchor = new GPoint(12.0, 16.0); > catIcon.infoWindowAnchor = new GPoint(12.0, 16.0); > map.disableScrollWheelZoom(); > > > <?php > } > if(abs($this->data->glat)==0&&abs($this->data->glng)==0) > { > $country=$mainframe->getUserState($option."countrytitle"); > $region=$mainframe->getUserState($option."regiontitle"); > > $address= array(); > if($region!= JText::_('ALL') && !empty($region)){ > $address[]=$region; > } > > if($country!= JText::_('ALL') && !empty($country)){ > $address[]=$country; > } > array_filter ($address); > > if(count($address)>0) > { > ?> > showAddress('<?php echo implode(',',$address)?>'); > <?php > } > else > { > ?> > showAddress('<?php echo > $this->params->get('map_default_address','Brisbane, Australia');?>'); > <?php > } > } > else > { > if( ! $this->pin->map_image && $this->data->map_image ) > { > ?> > catIcon = new GIcon(); > catIcon.image = '<?php echo > JUri::root().$this->data->map_image.".".$this->data->extension;?>'; > catIcon.shadow = '<?php echo > JUri::root().$this->data->shadow_image.".".$this->data->extension;?>'; > //catIcon.iconSize = new GSize(25.0, 32.0); > //catIcon.shadowSize = new GSize(42.0, 32.0); > catIcon.iconAnchor = new GPoint(12.0, 16.0); > catIcon.infoWindowAnchor = new GPoint(12.0, 16.0); > > <?php }?> > > current_point=new GLatLng(<?php echo $this->data->glat;?>,<?php > echo $this->data->glng;?>); > map.setCenter(current_point,<?php echo $this->data->level;?>); > marker = new > GMarker(current_point,{icon:catIcon,draggable:true}); > > GEvent.addListener(marker, "dragend", > function(latlng) { > current_point = latlng; > $('map_level').value=map.getZoom(); > $('map_glat').value=latlng.lat(); > $('map_glng').value=latlng.lng(); > > }); > > marker.disableDragging(); > map.addOverlay(marker); > > > markeradded=true; > markerfixed=true; > $('addMarkerButton').disabled=true; > $('addMarkerButton').setHTML("<?php echo > JText::_('REMOVE_MARKER');?>"); > $('fixMarkerButton').setHTML("<?php echo > JText::_('UNFIX_MARKER');?>"); > $('map_level').value=map.getZoom(); > $('map_glat').value=current_point.lat(); > $('map_glng').value=current_point.lng(); > <?php if($this->data->published==0){?> > > mapSlider.style.visibility = 'hidden'; > mapSlider.style.height = "0px"; > mapSlider.style.overflow = 'hidden'; > <?php }?> > > <?php > } > ?> > if(markeradded) > { > $('fixMarkerButton').disabled=false; > } > else > { > $('fixMarkerButton').disabled=true; > } > }); > > window.addEvent('unload',function(){GUnload()}); > //--> > </script> > <div class="gb_madata_publish"> > > <label><?php echo JText::_('Activeer Google Maps');?>:</label><div > class="gb_madata_publish_control"><?php echo $this->lists['status'];?></div> > </div> > > <div class="gb_map_locator" id="gb_maplocator"> > <a id="btnAddtomap"><?php echo JText::_('LOCATE_ADDRESS_TO_MAP');?></a> > <fieldset class="adminform"><input type="hidden" name="glat" > id="map_glat" /> <input type="hidden" name="glng" id="map_glng" /> > <input > type="hidden" name="level" id="map_level" /> > > <div id="map_canvas" style="width: 310px; height: 310px"></div> > <br /> > <div class="mapbuttons"><a id="addMarkerButton"><?php echo > JText::_('ADD_MARKER');?></a> > <a id="fixMarkerButton"><?php echo JText::_('FIX_MARKER');?></a></div> > </fieldset> > > > </div> > > -- > > --
