I created a new VF Page where I have 3 dependent dropdowns of country,state and city. Upon selection of the three dropdowns, I get a list of postal codes of the selected city where I have my installed products which I show it in a pageblocktable. I need to show this list of postal codes not only in a table but also on a google map. Say there are 5 postal codes, I need to show 5 markers on google map in my VF Page. How do I do this? Please guide me on how to add google API and pass the postal codes etc.

My VF Page:

<apex:page controller="TestController_1">
            <apex:pageBlockSection columns="2">
                    <apex:outputLabel value="Country" />
                    <apex:selectList size="1" value="{!state}">
                        <apex:selectOptions value="{!states}" />
                        <apex:actionSupport event="onchange" reRender="a,b,c" />

                    <apex:outputLabel value="State" />
                    <apex:selectList size="1" value="{!city}" id="a">
                        <apex:selectOptions value="{!cities}" />
                        <apex:actionSupport event="onchange" reRender="b,c" />

                    <apex:outputLabel value="City" />
                    <apex:selectList size="1" value="{!city1}" id="b">
                        <apex:selectOptions value="{!cities1}" />
                        <apex:actionSupport event="onchange" reRender="c" />

                <apex:pageBlockTable value="{!zipList}" var="item" id="c">
                        <apex:facet name="header">Zipcode</apex:facet>
                        <apex:outputText value="{!item['zip']}" />

                        <apex:facet name="header">IB Density</apex:facet>
                        <apex:outputText value="{!item['num']}" />

My controller is as follows:

public class TestController_1 {
    public String state {get;set;}
    public String city {get;set;}
    public String city1 {get;set;}

    public List < SelectOption > getStates() {
        List < SelectOption > options = new List < SelectOption > ();
        options.add(new SelectOption('-', '---Select---'));
        for (AggregateResult ar: [
                select SVMXC__Country__c n from SVMXC__Installed_Product__c where SVMXC__Country__c != ''
                group by SVMXC__Country__c
            ]) {
            String n = (String) ar.get('n');
            options.add(new SelectOption(n, n));
        return options;

    public List < SelectOption > getCities() {
        List < SelectOption > stateoptions = new List < SelectOption > ();
        stateoptions.add(new SelectOption('-', '---Select---'));
        for (AggregateResult arstate: [
                select SVMXC__State__c s from SVMXC__Installed_Product__c where SVMXC__Country__c =: state and SVMXC__State__c != ''
                group by SVMXC__State__c
            ]) {
            String s = (String) arstate.get('s');
            stateoptions.add(new SelectOption(s, s));
        return stateoptions;

    public List < SelectOption > getCities1() {
        List < SelectOption > stateoptions1 = new List < SelectOption > ();
        stateoptions1.add(new SelectOption('-', '---Select---'));
        for (AggregateResult arstate1: [
                select SVMXC__City__c s from SVMXC__Installed_Product__c where SVMXC__Country__c =: state and SVMXC__State__c =: city and SVMXC__City__c != ''
                group by SVMXC__City__c
            ]) {
            String s = (String) arstate1.get('s');
            stateoptions1.add(new SelectOption(s, s));
        return stateoptions1;

    public List < AggregateResult > getzipList() {
        return [select SVMXC__Zip__c zip, count(Name) num from SVMXC__Installed_Product__c where SVMXC__Country__c =: state
            and SVMXC__State__c =: city and SVMXC__City__c =: city1
            group by SVMXC__Country__c, SVMXC__State__c, SVMXC__City__c, SVMXC__Zip__c

1 Answer 1


I have posted a similar answer in this SFSE link. You have to use Google MAP API to place the marker on the MAP.

In this solution I have used Google Geocode API. As per Google, Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map.

Snippets from the link:

    var geocoder = new google.maps.Geocoder();
    var address = "{!JSENCODE(Account.BillingStreet)}, " + "{!JSENCODE(Account.BillingCity)}, " + "{!JSENCODE(Account.BillingPostalCode)}, " + "{!JSENCODE(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);
  • This works for one particular account right. My requirement is a little different. I need a list of postal codes shown on map taking the inputs from the dropdowns. May 17, 2016 at 10:17
  • Yes, this is an example of one MAP but you can easily create multiple instance of MAPs by passing different addresses details to the Geocode API.
    – Saroj Bera
    May 17, 2016 at 10:26
  • I need to display 5 postal codes on one map only. Isn't that possible? May 17, 2016 at 12:28
  • This is also possible with Geocoder. Please find this fiddle link jsfiddle.net/geocodezip/L5jrb5r9 on how to do this.
    – Saroj Bera
    May 17, 2016 at 13:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .