+ Start a Discussion
Janno RipJanno Rip 

<apex:map> and <apex:pageBlockTable> next to each other

Hello folks,

I have a problem with displaying my visualforce page. What I have right now ist this:
User-added image
What I want is this:

User-added image

  • <apex:form style="width:100%"> is fine and should stay this way (displaying the checkboxes and the commandButtons)
  • <apex:map width="70%"> seems to be working as well (displaying the map)
  • <apex:pageBlockTable width="30%"> is what seems to be the problem (displaying a table)

User-added image
Here is my Page:

 

<apex:page standardcontroller="Account" extensions="FindNearbyController" docType="html-5.0" lightningStylesheets="true" action="{!findNearby}"> 

    <apex:pageBlock >
      <apex:pageBlockSection columns="1" id="geomap">
         

      <apex:outputText style="font-size:19px;" value="
       
      {!IF(myInput = 'ger' && fcb = true,
       
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} deutschlandweit gefunden.',    
      
       IF(myInput = 'state'  && fcb = false, 
       
       '{0} Kunden aus den letzten {1} Tagen in {5} gefunden.',
            
        IF(myInput = 'state' && fcb = true,
        
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} in {5} gefunden.', 
       
       IF(myInput != 'state' && myInput != 'ger' && fcb = true,
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen in der Branche {2} gefunden.',
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen gefunden.'
       
       ))))}">
       
       <apex:param value="{!warehouses.size}"/>
       <apex:param value="{!myTime}"/>
       <apex:param value="{!currentAccount.WZ_Abteilung__c}"/>
       <apex:param value="{!myInput}"/>
       <apex:param value="{!currentAccount.Name}"/>
       <apex:param value="{!currentAccount.ShippingState}"/>
       
       </apex:outputText> 

        <apex:form style="width:100%">
        
        
          <!-- FILTER 1 (Branche) --> 
        <apex:inputCheckBox id="filter1" disabled="{!currentAccount.WZ_Buchstabe__c = null || myinput = 'ger' }" value="{!fcb}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter1" value="nur aus verwandter Branche ({!currentAccount.WZ_Abteilung__c})" />
      
        <!-- FILTER 2 (Owner) -->     
        <apex:inputCheckBox id="filter2" value="{!fco}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter2" value="nur meine Kunden" />
  
    <!-- Textfeld zur Angabe von km -->
          <apex:inputText value="{!myinput}" style="width:60px" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
          <apex:commandButton value="Umkreis anpassen (in km)" rerender="geomap" action="{!findNearby}" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
                  
         <!-- Button zurück -->  
        <apex:commandButton action="{!findNearby}" value="Zurück zur lokalen Suche" reRender="geomap" rendered="{!myinput = 'ger' || myinput = 'state' }">
         <apex:param assignTo="{!myInput}" name="back" id="back" value="{!currentAccount.MetaData_Distance_Customer__c}"/>
        </apex:commandButton>
                
              <!-- Button deutschlandweit --> 
        <apex:commandButton action="{!findNearby}" value="Deutschlandweit" reRender="geomap" rendered="{!myinput != 'ger'}" disabled="{!IF(fcb = false && fco = true,false,IF(fcb = true && fco = true,false,IF(fcb = true && fco = false,false,true)))}">
         <apex:param assignTo="{!myInput}" name="ger" id="ger" value="ger"/>
        </apex:commandButton>
        
        <!-- Button Bundesland-->  
        <apex:commandButton action="{!findNearby}" value="nur in {!currentAccount.ShippingState}" reRender="geomap" rendered="{!myinput != 'state'}">
         <apex:param assignTo="{!myInput}" name="state" id="state" value="state"/>
        </apex:commandButton>
  
     <!-- Textfeld zur Angabe von Zeitraum -->     
          <apex:inputText value="{!myTime}" style="width:60px"/>
          <apex:commandButton value="Zeitraum anpassen (in Tagen)" rerender="geomap" action="{!findNearby}"/>
      
 
    
        </apex:form> 

            <apex:map width="70%" height="300px" mapType="roadmap" center="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" showOnlyActiveInfoWindow="false" >
            
          
             <!-- Add a CUSTOM map marker for the current account -->
             <apex:mapMarker title="{! currentAccount.Name }" position="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" icon="{!URLFOR($Resource.location)}"/> 
            
            <!-- Add a CUSTOM map marker for the account list -->

                <apex:repeat value="{!warehouses}" var="war">
                    <apex:mapMarker position="{!war.GeoLocPosition__c}" title="{!war.Name}" 
                    icon="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),
                    
                    URLFOR($Resource.ms_marker))))}" >
            

            <!-- Add Info markers -->
                    
                    <apex:mapInfoWindow >
                                                         
                    <!-- Name + Link -->
                     <apex:outputPanel layout="block" style="font-weight: bold;">
                     <apex:outputLink value="{! '/' + war.Id}">
                    <apex:outputText >{! war.Name }</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                      
                    <!-- Straße -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.ShippingStreet }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Owner -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Accountinhaber_Text__c }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Vertriebskanal -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Auftragseingangstyp__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Index -->
                     <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.indexurl__c}">
                    <apex:outputText >{!war.anzeigendaten_de_ID_account__c}</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                        
                    <!-- Branche -->
                     <apex:outputPanel layout="block">
                    <apex:outputText >{! war.WirtschaftszweigWZ08__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Link zum Customer Cockpit -->
                    <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.URL_zum_CC__c}">
                    <apex:outputText >zum Customer Cockpit</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                                         
                    </apex:mapInfoWindow>

                    </apex:mapMarker>
                </apex:repeat>
            </apex:map>

    <!-- TABLE -->
        <apex:pageBlockTable width="30%" value="{!warehouses}"  var="war" >
              
         <apex:column > <input type="checkbox" />
         <apex:facet name="header">Kunde</apex:facet><apex:outputLink value="/{!war.Id}" target="_blank">{!war.Name}</apex:outputLink>
         </apex:column>
         
   <!--      <apex:column ><apex:facet name="header">Straße</apex:facet>{!war.ShippingStreet}</apex:column> -->
   <!--      <apex:column ><apex:facet name="header">Stadt</apex:facet>{!war.ShippingCity}</apex:column> -->
   <!--      <apex:column ><apex:facet name="header">Inhaber</apex:facet>{!war.Accountinhaber_Text__c }</apex:column> -->
   <!--      <apex:column ><apex:facet name="header">Index</apex:facet><apex:outputLink value="{!war.indexurl__c}" target="_blank">{!war.anzeigendaten_de_ID_account__c}</apex:outputLink></apex:column> -->
   <!--      <apex:column ><apex:facet name="header">Customer Cockpit</apex:facet><apex:outputLink value="{!war.URL_zum_CC__c}" target="_blank">zum Customer Cockpit</apex:outputLink></apex:column> -->

      </apex:pageBlockTable>

        </apex:pageBlockSection>

    </apex:pageBlock>
    
    
</apex:page>

When I switch from <apex:pageBlockSection columns="1"> to <apex:pageBlockSection columns="2"> it gets all messed up:

User-added image

What do I have to do?

Best Answer chosen by Janno Rip
Janno RipJanno Rip
After a lot of trial and error I was able to (almost) get my aimed outcome: (now there is sth wrong in my panelgrid, leading to "blank spaces" when the company name is too short
User-added image
Here is the code:
<apex:page standardcontroller="Account" extensions="FindNearbyController" docType="html-5.0" lightningStylesheets="true" action="{!findNearby}"> 
     
    <apex:pageBlock >
    <apex:pageBlockSection columns="1" id="geomap" >
        
    <apex:pageBlockSection columns="1">   <!-- Titel & Filter -->
         <apex:pageBlockSectionItem >
  
      <apex:outputText style="font-size:19px;" value=" 
       
      {!IF(myInput = 'ger' && fcb = true,
       
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} deutschlandweit gefunden.',    
      
       IF(myInput = 'state'  && fcb = false, 
       
       '{0} Kunden aus den letzten {1} Tagen in {5} gefunden.',
            
        IF(myInput = 'state' && fcb = true,
        
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} in {5} gefunden.', 
       
       IF(myInput != 'state' && myInput != 'ger' && fcb = true,
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen in der Branche {2} gefunden.',
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen gefunden.'
       
       ))))}">
       
       <apex:param value="{!warehouses.size}"/>
       <apex:param value="{!myTime}"/>
       <apex:param value="{!currentAccount.WZ_Abteilung__c}"/>
       <apex:param value="{!myInput}"/>
       <apex:param value="{!currentAccount.Name}"/>
       <apex:param value="{!currentAccount.ShippingState}"/>
       
       </apex:outputText>
        
     </apex:pageBlockSectionItem> <!-- Titel -->  
         <apex:pageBlockSectionItem ><apex:form >   
        
          <!-- FILTER 1 (Branche) --> 
        <apex:inputCheckBox id="filter1" disabled="{!currentAccount.WZ_Buchstabe__c = null || myinput = 'ger' }" value="{!fcb}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter1" value="nur aus verwandter Branche ({!currentAccount.WZ_Abteilung__c})" />
      
        <!-- FILTER 2 (Owner) -->     
        <apex:inputCheckBox id="filter2" value="{!fco}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter2" value="nur meine Kunden" />
        
        
    <!-- Textfeld zur Angabe von km -->
          <apex:inputText value="{!myinput}" style="width:60px" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
          <apex:commandButton value="Umkreis anpassen (in km)" rerender="geomap" action="{!findNearby}" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
                  
         <!-- Button zurück -->  
        <apex:commandButton action="{!findNearby}" value="Zurück zur lokalen Suche" reRender="geomap" rendered="{!myinput = 'ger' || myinput = 'state' }">
         <apex:param assignTo="{!myInput}" name="back" id="back" value="{!currentAccount.MetaData_Distance_Customer__c}"/>
        </apex:commandButton>
                
              <!-- Button deutschlandweit --> 
        <apex:commandButton action="{!findNearby}" value="Deutschlandweit" reRender="geomap" rendered="{!myinput != 'ger'}" disabled="{!IF(fcb = false && fco = true,false,IF(fcb = true && fco = true,false,IF(fcb = true && fco = false,false,true)))}">
         <apex:param assignTo="{!myInput}" name="ger" id="ger" value="ger"/>
        </apex:commandButton>
        
        <!-- Button Bundesland-->  
        <apex:commandButton action="{!findNearby}" value="nur in {!currentAccount.ShippingState}" reRender="geomap" rendered="{!myinput != 'state'}">
         <apex:param assignTo="{!myInput}" name="state" id="state" value="state"/>
        </apex:commandButton>
  
     <!-- Textfeld zur Angabe von Zeitraum -->     
          <apex:inputText value="{!myTime}" style="width:60px"/>
          <apex:commandButton value="Zeitraum anpassen (in Tagen)" rerender="geomap" action="{!findNearby}"/>

        </apex:form></apex:pageBlockSectionItem> <!-- Filter -->    
    </apex:pageBlockSection>      
  
        
    <apex:pageBlockSection columns="2"> <!-- Map & Grid --> 
          <apex:pageBlockSectionItem dataStyle="width:80%">
      <!--      <apex:pageBlockTable width="100%" value="{!Account}" var="acc" > -->
 
   <!--       <apex:column  width="100%">  Map --> 
     	   <apex:map height="300px" width="100%" mapType="roadmap" center="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" showOnlyActiveInfoWindow="false" >
            
          
             <!-- Add a CUSTOM map marker for the current account -->
             <apex:mapMarker title="{! currentAccount.Name }" position="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" icon="{!URLFOR($Resource.location)}"/> 
            
            <!-- Add a CUSTOM map marker for the account list -->
            <!-- Bilder werden als "Static Resource" hochgeladen -->
          
                <apex:repeat value="{!warehouses}" var="war">
                    <apex:mapMarker  position="{!war.GeoLocPosition__c}" title="{!war.Name}" 
                    icon="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),
                    
                    URLFOR($Resource.ms_marker))))}"> 
            

            <!-- Add Info markers -->
                          
       
                    <apex:mapInfoWindow >
                              
                    <!-- Name + Link -->
                     <apex:outputPanel layout="block" style="font-weight: bold;">
                     <apex:outputLink value="{! '/' + war.Id}">
                    <apex:outputText >{! war.Name }</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                      
                    <!-- Straße -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.ShippingStreet }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Owner -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Accountinhaber_Text__c }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Vertriebskanal -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Auftragseingangstyp__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Index -->
                     <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.indexurl__c}">
                    <apex:outputText >{!war.anzeigendaten_de_ID_account__c}</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                        
                    <!-- Branche -->
                     <apex:outputPanel layout="block">
                    <apex:outputText >{! war.WirtschaftszweigWZ08__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Link zum Customer Cockpit -->
                    <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.URL_zum_CC__c}">
                    <apex:outputText >zum Customer Cockpit</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                              
                    </apex:mapInfoWindow>
                       
                    </apex:mapMarker>
                </apex:repeat>
            </apex:map>
 
         </apex:pageBlockSectionItem> 
   
        
        <!-- GRID -->
         
         <apex:pageBlockSectionItem >

        <apex:outputPanel styleClass="container-fluid">
 
            
            <div style="height:300px; overflow:auto !important;"> 
               
                
             <apex:repeat value="{!warehouses}" var="war">
                 <apex:panelGrid styleClass="col-xs-6 col-md-4" columns="2" >
                           
                    <apex:image url="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),URLFOR($Resource.ms_marker))))}" styleClass="imageStyle"/>
                
                <apex:panelGroup styleClass="dataStlye">
                    
                     <a id="{!war.Id}"
                onmouseover="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                onmouseout="LookupHoverDetail.getHover('{!war.Id}').hide();"
                onfocus="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                onblur="LookupHoverDetail.getHover('{!war.Id}').hide();"
                href="/{!war.Id}" target="_blank"> 
                {!war.Name}
            		</a> <br/>
                    
          
                    
                    <apex:outputText > {!war.ShippingStreet}</apex:outputText> <br/>
                    <apex:outputText > {!war.ShippingPostalCode} </apex:outputText>
                    <apex:outputText > {!war.ShippingCity} </apex:outputText> <br/>
                    
                 </apex:panelGroup>    
               
                </apex:panelGrid>  
            </apex:repeat> 
                
               		 </div>
            
               
           
       </apex:outputpanel>  

    </apex:pageBlockSectionItem>  
        
	</apex:pageBlockSection>   
        
   </apex:pageBlockSection>  
        
    
    </apex:pageBlock>   
   
</apex:page>

 

All Answers

Prady01Prady01
Hi there, You could try the below.
 
<apex:page>
<apex:pageBlock >
<apex:pageBlockSection columns="1" id="geomap">
<apex:pageBlockTable width="100%">

<apex:column>
//put the map component here
</apex:column>

<apex:column>
//put the list component here
</apex:column>

</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock >
</apex:page>

In this case you can adjust your page using lot of attributes in either <apex:pageblocktable> or <apex:column>. Attributes like in page block table we can use: "cellspacing, columns, columnsWidth, align" in column we can use attributes like: "width, colspan".


Hope this helps!
Prady01
Janno RipJanno Rip

Hello @Prady01,

thanks  for your reply. I followed your hint and I get the idea but lack the practice. Now its all in 1 column but still messed up:

User-added image
 

<apex:page standardcontroller="Account" extensions="FindNearbyController" docType="html-5.0" lightningStylesheets="true" action="{!findNearby}"> 


    <apex:pageBlock >
      <apex:pageBlockSection columns="1" id="geomap">
          <apex:pageBlockTable value="{!currentAccount}" var="acc" width="100%">
            <!-- Überschrift der VF Page --> 
     
      <apex:column >  
      <apex:outputText style="font-size:19px;" value="
       
      {!IF(myInput = 'ger' && fcb = true,
       
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} deutschlandweit gefunden.',    
      
       IF(myInput = 'state'  && fcb = false, 
       
       '{0} Kunden aus den letzten {1} Tagen in {5} gefunden.',
            
        IF(myInput = 'state' && fcb = true,
        
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} in {5} gefunden.', 
       
       IF(myInput != 'state' && myInput != 'ger' && fcb = true,
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen in der Branche {2} gefunden.',
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen gefunden.'
       
       ))))}">
       
       <apex:param value="{!warehouses.size}"/>
       <apex:param value="{!myTime}"/>
       <apex:param value="{!currentAccount.WZ_Abteilung__c}"/>
       <apex:param value="{!myInput}"/>
       <apex:param value="{!currentAccount.Name}"/>
       <apex:param value="{!currentAccount.ShippingState}"/>
       
       </apex:outputText> 
        
       </apex:column> 
  
       <apex:column >

        <apex:form style="width:100%">   
        
          <!-- FILTER 1 (Branche) --> 
        <apex:inputCheckBox id="filter1" disabled="{!currentAccount.WZ_Buchstabe__c = null || myinput = 'ger' }" value="{!fcb}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter1" value="nur aus verwandter Branche ({!currentAccount.WZ_Abteilung__c})" />
      
        <!-- FILTER 2 (Owner) -->     
        <apex:inputCheckBox id="filter2" value="{!fco}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter2" value="nur meine Kunden" />
        
        
    <!-- Textfeld zur Angabe von km -->
          <apex:inputText value="{!myinput}" style="width:60px" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
          <apex:commandButton value="Umkreis anpassen (in km)" rerender="geomap" action="{!findNearby}" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
                  
         <!-- Button zurück -->  
        <apex:commandButton action="{!findNearby}" value="Zurück zur lokalen Suche" reRender="geomap" rendered="{!myinput = 'ger' || myinput = 'state' }">
         <apex:param assignTo="{!myInput}" name="back" id="back" value="{!currentAccount.MetaData_Distance_Customer__c}"/>
        </apex:commandButton>
                
              <!-- Button deutschlandweit --> 
        <apex:commandButton action="{!findNearby}" value="Deutschlandweit" reRender="geomap" rendered="{!myinput != 'ger'}" disabled="{!IF(fcb = false && fco = true,false,IF(fcb = true && fco = true,false,IF(fcb = true && fco = false,false,true)))}">
         <apex:param assignTo="{!myInput}" name="ger" id="ger" value="ger"/>
        </apex:commandButton>
        
        <!-- Button Bundesland-->  
        <apex:commandButton action="{!findNearby}" value="nur in {!currentAccount.ShippingState}" reRender="geomap" rendered="{!myinput != 'state'}">
         <apex:param assignTo="{!myInput}" name="state" id="state" value="state"/>
        </apex:commandButton>
  
     <!-- Textfeld zur Angabe von Zeitraum -->     
          <apex:inputText value="{!myTime}" style="width:60px"/>
          <apex:commandButton value="Zeitraum anpassen (in Tagen)" rerender="geomap" action="{!findNearby}"/>

        </apex:form> 
        
        </apex:column> 
 
        <apex:column >

        <apex:map width="100%" height="300px" mapType="roadmap" center="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" showOnlyActiveInfoWindow="false" >
            
          
             <!-- Add a CUSTOM map marker for the current account -->
             <apex:mapMarker title="{! currentAccount.Name }" position="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" icon="{!URLFOR($Resource.location)}"/> 
            
            <!-- Add a CUSTOM map marker for the account list -->
            <!-- Bilder werden als "Static Resource" hochgeladen -->
          
                <apex:repeat value="{!warehouses}" var="war">
                    <apex:mapMarker position="{!war.GeoLocPosition__c}" title="{!war.Name}" 
                    icon="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),
                    
                    URLFOR($Resource.ms_marker))))}"> 
            

            <!-- Add Info markers -->
                    
                    <apex:mapInfoWindow >
                                                         
                    <!-- Name + Link -->
                     <apex:outputPanel layout="block" style="font-weight: bold;">
                     <apex:outputLink value="{! '/' + war.Id}">
                    <apex:outputText >{! war.Name }</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                      
                    <!-- Straße -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.ShippingStreet }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Owner -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Accountinhaber_Text__c }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Vertriebskanal -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Auftragseingangstyp__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Index -->
                     <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.indexurl__c}">
                    <apex:outputText >{!war.anzeigendaten_de_ID_account__c}</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                        
                    <!-- Branche -->
                     <apex:outputPanel layout="block">
                    <apex:outputText >{! war.WirtschaftszweigWZ08__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Link zum Customer Cockpit -->
                    <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.URL_zum_CC__c}">
                    <apex:outputText >zum Customer Cockpit</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                                         
                    </apex:mapInfoWindow>

                    </apex:mapMarker>
                </apex:repeat>
            </apex:map>

</apex:column>

   
   <apex:column >
 
    <!-- GRID -->
        <apex:outputPanel styleClass="container-fluid">
            <div class="row">
               <apex:repeat value="{!warehouses}" var="war"> 
                 <apex:panelGrid styleClass="col-xs-6 col-md-4" columns="2" >
                
                
                    <apex:image url="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),URLFOR($Resource.ms_marker))))}" styleClass="imageStyle"/>
                
                <apex:panelGroup styleClass="dataStlye">
                    <apex:outputText > <apex:outputLink value="/{!account.Id}" target="_blank">{!war.Name}</apex:outputLink></apex:outputText> <br/>
               
                            
                    <apex:outputText > {!war.ShippingStreet}</apex:outputText> <br/>
                  
              
                    <apex:outputText > {!war.ShippingPostalCode} </apex:outputText>
                    <apex:outputText > {!war.ShippingCity} </apex:outputText> <br/>
                 </apex:panelGroup>    
               
                </apex:panelGrid>  
               </apex:repeat>  
            </div>
       </apex:outputpanel>    
     
  </apex:column>

    </apex:pageBlockTable>
    </apex:pageBlockSection>
    </apex:pageBlock>   

</apex:page>

The outcome should look something like this:

User-added image

Janno RipJanno Rip
After a lot of trial and error I was able to (almost) get my aimed outcome: (now there is sth wrong in my panelgrid, leading to "blank spaces" when the company name is too short
User-added image
Here is the code:
<apex:page standardcontroller="Account" extensions="FindNearbyController" docType="html-5.0" lightningStylesheets="true" action="{!findNearby}"> 
     
    <apex:pageBlock >
    <apex:pageBlockSection columns="1" id="geomap" >
        
    <apex:pageBlockSection columns="1">   <!-- Titel & Filter -->
         <apex:pageBlockSectionItem >
  
      <apex:outputText style="font-size:19px;" value=" 
       
      {!IF(myInput = 'ger' && fcb = true,
       
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} deutschlandweit gefunden.',    
      
       IF(myInput = 'state'  && fcb = false, 
       
       '{0} Kunden aus den letzten {1} Tagen in {5} gefunden.',
            
        IF(myInput = 'state' && fcb = true,
        
       '{0} Kunden aus den letzten {1} Tagen in der Branche {2} in {5} gefunden.', 
       
       IF(myInput != 'state' && myInput != 'ger' && fcb = true,
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen in der Branche {2} gefunden.',
       
       '{0} Kunden im {3} km Umkreis aus den letzten {1} Tagen gefunden.'
       
       ))))}">
       
       <apex:param value="{!warehouses.size}"/>
       <apex:param value="{!myTime}"/>
       <apex:param value="{!currentAccount.WZ_Abteilung__c}"/>
       <apex:param value="{!myInput}"/>
       <apex:param value="{!currentAccount.Name}"/>
       <apex:param value="{!currentAccount.ShippingState}"/>
       
       </apex:outputText>
        
     </apex:pageBlockSectionItem> <!-- Titel -->  
         <apex:pageBlockSectionItem ><apex:form >   
        
          <!-- FILTER 1 (Branche) --> 
        <apex:inputCheckBox id="filter1" disabled="{!currentAccount.WZ_Buchstabe__c = null || myinput = 'ger' }" value="{!fcb}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter1" value="nur aus verwandter Branche ({!currentAccount.WZ_Abteilung__c})" />
      
        <!-- FILTER 2 (Owner) -->     
        <apex:inputCheckBox id="filter2" value="{!fco}" >
        <apex:actionSupport event="onclick" action="{!findNearby}" rerender="geomap"/>
        </apex:inputCheckBox>
        <apex:outputLabel for="filter2" value="nur meine Kunden" />
        
        
    <!-- Textfeld zur Angabe von km -->
          <apex:inputText value="{!myinput}" style="width:60px" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
          <apex:commandButton value="Umkreis anpassen (in km)" rerender="geomap" action="{!findNearby}" rendered="{!myinput != 'ger' && myinput != 'state' }"/>
                  
         <!-- Button zurück -->  
        <apex:commandButton action="{!findNearby}" value="Zurück zur lokalen Suche" reRender="geomap" rendered="{!myinput = 'ger' || myinput = 'state' }">
         <apex:param assignTo="{!myInput}" name="back" id="back" value="{!currentAccount.MetaData_Distance_Customer__c}"/>
        </apex:commandButton>
                
              <!-- Button deutschlandweit --> 
        <apex:commandButton action="{!findNearby}" value="Deutschlandweit" reRender="geomap" rendered="{!myinput != 'ger'}" disabled="{!IF(fcb = false && fco = true,false,IF(fcb = true && fco = true,false,IF(fcb = true && fco = false,false,true)))}">
         <apex:param assignTo="{!myInput}" name="ger" id="ger" value="ger"/>
        </apex:commandButton>
        
        <!-- Button Bundesland-->  
        <apex:commandButton action="{!findNearby}" value="nur in {!currentAccount.ShippingState}" reRender="geomap" rendered="{!myinput != 'state'}">
         <apex:param assignTo="{!myInput}" name="state" id="state" value="state"/>
        </apex:commandButton>
  
     <!-- Textfeld zur Angabe von Zeitraum -->     
          <apex:inputText value="{!myTime}" style="width:60px"/>
          <apex:commandButton value="Zeitraum anpassen (in Tagen)" rerender="geomap" action="{!findNearby}"/>

        </apex:form></apex:pageBlockSectionItem> <!-- Filter -->    
    </apex:pageBlockSection>      
  
        
    <apex:pageBlockSection columns="2"> <!-- Map & Grid --> 
          <apex:pageBlockSectionItem dataStyle="width:80%">
      <!--      <apex:pageBlockTable width="100%" value="{!Account}" var="acc" > -->
 
   <!--       <apex:column  width="100%">  Map --> 
     	   <apex:map height="300px" width="100%" mapType="roadmap" center="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" showOnlyActiveInfoWindow="false" >
            
          
             <!-- Add a CUSTOM map marker for the current account -->
             <apex:mapMarker title="{! currentAccount.Name }" position="{!currentAccount.ShippingStreet},{!currentAccount.ShippingState},{!currentAccount.ShippingCity},{!currentAccount.ShippingPostalCode}" icon="{!URLFOR($Resource.location)}"/> 
            
            <!-- Add a CUSTOM map marker for the account list -->
            <!-- Bilder werden als "Static Resource" hochgeladen -->
          
                <apex:repeat value="{!warehouses}" var="war">
                    <apex:mapMarker  position="{!war.GeoLocPosition__c}" title="{!war.Name}" 
                    icon="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),
                    
                    URLFOR($Resource.ms_marker))))}"> 
            

            <!-- Add Info markers -->
                          
       
                    <apex:mapInfoWindow >
                              
                    <!-- Name + Link -->
                     <apex:outputPanel layout="block" style="font-weight: bold;">
                     <apex:outputLink value="{! '/' + war.Id}">
                    <apex:outputText >{! war.Name }</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                      
                    <!-- Straße -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.ShippingStreet }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Owner -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Accountinhaber_Text__c }</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Vertriebskanal -->
                    <apex:outputPanel layout="block">
                    <apex:outputText >{! war.Auftragseingangstyp__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Index -->
                     <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.indexurl__c}">
                    <apex:outputText >{!war.anzeigendaten_de_ID_account__c}</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                        
                    <!-- Branche -->
                     <apex:outputPanel layout="block">
                    <apex:outputText >{! war.WirtschaftszweigWZ08__c}</apex:outputText>
                    </apex:outputPanel>
                    
                    <!-- Link zum Customer Cockpit -->
                    <apex:outputPanel layout="block">
                   <apex:outputLink value="{!war.URL_zum_CC__c}">
                    <apex:outputText >zum Customer Cockpit</apex:outputText>
                    </apex:outputLink>
                    </apex:outputPanel>
                                              
                    </apex:mapInfoWindow>
                       
                    </apex:mapMarker>
                </apex:repeat>
            </apex:map>
 
         </apex:pageBlockSectionItem> 
   
        
        <!-- GRID -->
         
         <apex:pageBlockSectionItem >

        <apex:outputPanel styleClass="container-fluid">
 
            
            <div style="height:300px; overflow:auto !important;"> 
               
                
             <apex:repeat value="{!warehouses}" var="war">
                 <apex:panelGrid styleClass="col-xs-6 col-md-4" columns="2" >
                           
                    <apex:image url="{!IF(war.AE_letzte_12_Monate__c > 5000,URLFOR($Resource.ms_star),
                            IF(war.AD_MS_Rel_Anzahl_bez__c <= currentAccount.AD_MS_Rel_Anzahl_bez__c && war.WirtschaftszweigWZ08__c = currentAccount.WirtschaftszweigWZ08__c && war.Mitarbeiternzahl_final__c = currentAccount.Mitarbeiternzahl_final__c,URLFOR($Resource.perfect_fit),
                            IF(war.Accountinhaber_Text__c= 'JOB SHOP',URLFOR($Resource.shop),URLFOR($Resource.ms_marker))))}" styleClass="imageStyle"/>
                
                <apex:panelGroup styleClass="dataStlye">
                    
                     <a id="{!war.Id}"
                onmouseover="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                onmouseout="LookupHoverDetail.getHover('{!war.Id}').hide();"
                onfocus="LookupHoverDetail.getHover('{!war.Id}', '/{!war.Id}/m?retURL={!war.Id}&isAjaxRequest=1').show();"
                onblur="LookupHoverDetail.getHover('{!war.Id}').hide();"
                href="/{!war.Id}" target="_blank"> 
                {!war.Name}
            		</a> <br/>
                    
          
                    
                    <apex:outputText > {!war.ShippingStreet}</apex:outputText> <br/>
                    <apex:outputText > {!war.ShippingPostalCode} </apex:outputText>
                    <apex:outputText > {!war.ShippingCity} </apex:outputText> <br/>
                    
                 </apex:panelGroup>    
               
                </apex:panelGrid>  
            </apex:repeat> 
                
               		 </div>
            
               
           
       </apex:outputpanel>  

    </apex:pageBlockSectionItem>  
        
	</apex:pageBlockSection>   
        
   </apex:pageBlockSection>  
        
    
    </apex:pageBlock>   
   
</apex:page>

 
This was selected as the best answer