Question

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.

<script
    src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;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>

I hope someone can help me, stuck with this already a couple of weeks…

Answer 1

Solved 🙂

Changed this:
map = new GMap2(document.getElementById(“map_canvas”));
in:
map = new GMap2(document.getElementById(“map_canvas”),{ size: new GSize(430, 315) });