Hello everyone,

I have a working Visualforce Page that displays accounts close to my 'current' account in a googlemap. Now I found this aura component:

https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example#lightningcomponentdemo:exampleMapAttributes

While I do not wish to rework everything, I reall like 2 things here that would love to see in my Visualforce page:

1. Hovering over the locations inside the table makes the marker 'jump'
2. The way image, title and addressed are dispayed in one 'block'

Is there any chance of rebuilding this in a visualforce page?

Here is my current version:



 

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

    <apex:pageBlock >
      <apex:pageBlockSection columns="1" id="geomap">
            <!-- Überschrift der VF Page --> 

      <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%">
        <!-- style="width:100%" - sorgt in der Kombination von columns="1" dafür, dass die Seite immer dynamisch 100% der Länge einnimmt  --> 
        
        
          <!-- 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 -->
            <!-- 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>

    <!-- TABLE -->
        <apex:pageBlockTable width="30%" value="{!warehouses}"  var="war" >
              
         <apex:column>  
   <!--  <input type="checkbox" />  -->
   
           
         
         <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))))}"/>
                    
         <apex:facet name="header">Kunde</apex:facet><apex:outputLink value="/{!war.Id}" target="_blank">{!war.Name}</apex:outputLink>
         
         </apex:column>

      </apex:pageBlockTable>

        </apex:pageBlockSection>

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