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

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. – Nagashruthi Chakilam May 17 '16 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 '16 at 10:26
  • I need to display 5 postal codes on one map only. Isn't that possible? – Nagashruthi Chakilam May 17 '16 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 '16 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.