function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Saie Shendage 7Saie Shendage 7 

How to use google API for mouseover event?

<apex:page controller="Page2_Controller">
    <apex:pageBlock >
    	<apex:pageBlockSection >
        	<apex:pageBlockTable value="{!Societies}" var="s">
                
                <apex:column value="{!s.name}"/>
                <apex:column value="{!s.Secretary__c}"/>
                <apex:column value="{!s.No_of_Members__c}"/>
                <apex:column >
                    <apex:facet name="header">Location</apex:facet>
                    <apex:outputLink value="https://maps.google.com" target="new">
                    <apex:outputText value="{!s.Location__c}"/>
                    	<apex:param name="q" value="{!s.Location__c}"/>
                    </apex:outputLink>
        		</apex:column>
    		</apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
    
    <apex:form >
        <apex:inputHidden value="{!startingFrom}"/>
        <apex:panelGrid columns="2" cellpadding="2px">
            <apex:commandLink action="{!previous}" value="Previous"/>
            <apex:commandLink action="{!next}" value="Next"/>
        </apex:panelGrid>
    </apex:form>
    
</apex:page>
 
public class Page2_Controller {
    private final integer MAX_RECORDS_PER_PAGE = 5;
    public integer startingFrom {get; set;}
    private integer socRecordCount; 
	//View Society
    public Page2_Controller(){
        if(startingFrom == NUll)
            startingFrom=0;
        socRecordCount = [select count() from Society__c];
    }
    public List<Society__c> getSocieties(){
        List<Society__c> results=[select name,Secretary__c,No_Of_Members__c,location__c 
                                  from Society__c limit :MAX_RECORDS_PER_PAGE
               offset : startingFrom];
        return results;  
    }
    
    public PageReference previous()
    {
     	if(startingFrom <= 0)
        {   
            startingFrom = 0;
        } else if(startingFrom >= socRecordCount)
            startingFrom = startingFrom - MAX_RECORDS_PER_PAGE;
        else if(startingFrom < socRecordCount)
        {
            startingFrom = startingFrom - MAX_RECORDS_PER_PAGE;
        }
        
        return ApexPages.currentPage();
    }
    
	public PageReference next()
    {
        if((socRecordCount - startingFrom) > MAX_RECORDS_PER_PAGE)
            startingFrom = startingFrom + MAX_RECORDS_PER_PAGE;
        return ApexPages.currentPage();
    }  
    
    
}

In this table, I am displaying Society object in a table, where when I click on Location field I get directed to new page(maps.google.com) showing location on the map.
Instead of that, I want location to be displayed on the same page on mouseover.
Can you please help me out by providing the code?
AnudeepAnudeep (Salesforce Developers) 
You need to create a marker and add a listener
 
//create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Account.Name}"
        });
 
//add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });
 
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

I recommend reviewing the following resources

https://salesforce.stackexchange.com/questions/93237/google-map-in-visualforce-page

https://developers.google.com/maps/documentation/javascript/events

Let me know if this helps, if it does, please mark this answer as best so that others facing the same issue will find this information useful. Thank you