Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DorababuDorababu 

Google map on a custom detail page

Hi,

I am supposed to display address specific map on the detail page(visualforce page). I got the code from the following link.

 

http://phollaio.tumblr.com/post/22058038379/inline-google-maps-using-visualforce

 

This thing works fine on a standard page layout but my req. is to display map on a custom visualforce detail page.

Code is as follows

 

<apex:page standardController="Account">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {

  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  if(IsPersonAccount==true)
  {
  var address1 = "{!account.PersonMailingStreet}, " + "{!account .PersonMailingCity}, " + "{!account .PersonMailingState}, " + "{!account .PersonMailingPostalCode}, " + "{!account .PersonMailingCountry}";
  
  ----------------------For PersonAccount------------------
	var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Account.First_Name__pc }</b><br><b>{!Account.Account.Last_Name__pc }</b><br>{!Account.PersonMailingStreet}<br>{!Account.PersonMailingCity}<br> {!Account.PersonMailingPostalCode}<br>{!Account.PersonMailingState}<br>{!Account.PersonMailingCountry}<br>"
  });

  geocoder.geocode( { address: address1}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);

        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Account.Last_Name__pc}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Account.Last_Name__pc}'s billing address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });
  }
  else
  {
  var address = "{!account.BillingStreet}, " + "{!account .BillingCity}, " + "{!account .BillingPostalCode}, " + "{!account .BillingCountry}";
  
	
  ----------------------For Business Account-----------------
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);

        //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()); 
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }
}
});

</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:250px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body> 
</apex:page>

 Controller

 

public with sharing class addressMapController {
    
    ApexPages.StandardController con;
    public Account account{get;set;}
    public Id accountId;
    public String getAccount() {
        return null;
    }
    public addressMapController(){
    }
    
    public addressMapController(ApexPages.StandardController controller){
     accountId = ApexPages.currentPage().getParameters().get('Id');
     List<Account> acc= new List<Account>([Select ID,RecordTypeId,RecordType.developername from Account where id=:accountId]);
     if(acc[0].RecordType.developername=='PersonAccount')
     {
    account = [select id, First_Name__pc,Last_Name__pc,Middle_Name__pc,Father_s_Name__pc,PersonBirthdate,Sex__pc,
                 Member_Type__pc,Public_Figure__pc,CASA_Balance__pc,Credit_Score_External__pc,Total_Relationship_Value_Under_various__pc,
                 Residential_status__pc,Total_Revenue__pc,Customer_Image__pc,CustomerSignature__pc,PersonMailingStreet,PersonOtherStreet,
                 PersonMailingCity,PersonOtherCity,PersonMailingState,PersonOtherState,PersonMailingPostalCode,PersonOtherPostalCode,PersonMailingCountry,
                 PersonOtherCountry,Office_Street__pc,PersonMobilePhone,Office_City__pc,PersonEmail,Office_State__pc,Nationality__pc,
                 Office_Zip__pc,Staying_Since__pc,Office_Country__pc,Place_of_Birth__pc,Interests__pc
                  from Account where id=:accountId];
                  }
     else if(acc[0].RecordType.developername=='Business_Account')
     {
     
     account = [Select BillingStreet,BillingCity,BillingState,BillingPostalCode,BillingCountry
                                  from Account where id=: accountId];
     account = [Select Name,Customer_ID__c, Date_of_Incorporation__c,Registration_No__c,Sales_Tax_Number__c,Excise_Number__c, 
                  Company_Type__c,Annual_Turnover__c,Credit_Score_Internal__c,Number_of_Employees__c,CASA_Balance__c,Total_Relationship_Value__c, 
                     Total_Revenue__c,Tax_Bracket__c,Loyalty_points_Accumulated_so_far__c,Credit_Score_External__c   from Account where id=:accountId];
     }
     System.debug('############################'+accountId);
    }
    public PageReference mapit(){
    return Page.addressmap;
    }
}

 Any help would be appreciated.

 

Thanks in advance,

asish1989asish1989

Hi

Try in this wray

<apex:page controller = "customController">

// same like  before

var address = "{!account.BillingStreet}, " + "{!account.BillingCity}, " + "{!account.BillingPostalCode}, " + "{!account.BillingCountry}";

 

You need to write like wise, change Account to account which is Account reference in your controller.

 

In your controller make a query

public class customController{

  public Account account{get;set;}

  public Id accountId;}

 

  public customController(){

      accountId = ApexPages.currentPage().getParameters().get('Id');

     account = [select, id, BillingCity, BillingPostalCode, BillingStreet .......... from Account where id=:accountId];

 

   }

 

}

 

You will have give id in the url page, Dont forget to change Account to account in the page.

 

If this post answers your question please mark it as solved and give kudos for this post

 

Thanks

 
DorababuDorababu

HI 

public with sharing class businessAccController {
public String Account { get; set; } //salesforce editor suggested to create this; with this I got error as unknown        property:String.BillingStreet
ApexPages.StandardController con;
public List<Account> accounts{get;set;}

// public String Account { get; set; }
public businessAccController() {
}


//List<Account> accounts = new List<Account>();
public Id accountId;

public businessAccController(ApexPages.StandardController controller) {
// accounts = (Account)con.getRecord();
accountId = ApexPages.currentPage().getParameters().get('Id');
//accounts = new List<Account>();
accounts = [select id, BillingStreet, BillingCity, BillingPostalCode,BillingCountry from Account where id=:accountId];
}
}

 
asish1989asish1989

Hi

Your have declaired accounts  as list ; In the query you have fatching only one record.

 

public List<Account> accounts{get;set;}
accountId = ApexPages.currentPage().getParameters().get('Id');

accounts = [select id, BillingStreet, BillingCity, BillingPostalCode,BillingCountry from Account where id=:accountId];

 

accounts always containg single record.

 

Thanks