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 display location field on google maps on mouseover?

<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) 
Here is a sample code 
 
function setupWellMarker(oMap, well) {
if(well.lat !== "") {
//console.log('well lat long available');
var content = '{!Well__c.name}';
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(well.lat,well.lng)
});
markers.push(marker);
google.maps.event.addListener(
marker, 'click', function() {
if(isMobile) {
sforce.one.navigateToSObject(well.id);
} else {
location='GrdDashboard?id='+well.id;
}
});

var contentString = '<div id="content">' +
'<h1 id="firstHeading" class="firstHeading">{!well.name}</h1>' +
'<div id="bodyContent">' +
'<p><b>' + well.name+ '</b><br />'+
'<b>Operating Field AMU: </b>' + well.amu + '<br />' +
'<b>AFE: </b>' + well.afe + '<br />' +
'<b>Well Status: </b>' + well.status + '<br/>' +
'<b>License: </b>' + well.licenseNo + '<br />' +
'</p>' +
'</div>' +
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(
marker, 'mouseover', function() {
if(!isMobile) {
infowindow.open(map,marker);
}
});
google.maps.event.addListener(
marker, 'mouseout', function() {
if(!isMobile) {
infowindow.close();
}
});
bounds.extend(new google.maps.LatLng(well.lat,well.lng));
map.fitBounds(bounds);
}
}



</script>

<apex:outputPanel id="scriptPanel">
<script>
wellLocs = new Array();
var bounds = new google.maps.LatLngBounds();
function reloadWells() {
<apex:repeat value="{!wells}" var="well">
//ALL FIELDS OF "Well__c" are available, but need to be re-assigned for ease of use.
wellLocs.push({
name: "{!well.Name}",
id: "{!well.id}",
lat: "{!well.Geo_Location__Latitude__s}",
lng: "{!well.Geo_Location__Longitude__s}",
amu: "{!well.Operating_Field_AMU__r.Name}",
status: "{!well.Well_Status__c}",
licenseNo: "{!well.Well_License_No__c}",
uwi: "{!well.UWI__c}",
afe: "{!well.AFE_Number__c}"
});
</apex:repeat>
}
reloadWells();
if(mapInit) {
redrawMap();
}
</script>
</apex:outputPanel>
<script>
google.maps.event.addDomListener( window, 'load', initialize);
</script>
</apex:page>


You need to use Google Maps API in your VF page, I suggest looking at this post

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
Saie Shendage 7Saie Shendage 7
Hello Anudeep, where should I write the code you provided?