Solved :)
Changed this:
map = new GMap2(document.getElementById("map_canvas"));
In:
map = new GMap2(document.getElementById("map_canvas"),{ size: new
GSize(430, 315) });
On Tuesday, January 22, 2013 7:57:42 PM UTC+1, Johan van der Meer wrote:
>
> '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.
>
> Maybe you guys have any idea? this is the script that i'm using:
>
> <script
>
> src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=
> <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>
>
>
>
>
--
