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:form>
<apex:pageBlock>
<apex:pageBlockSection columns="2">
<apex:pageblockSectionItem>
<apex:outputLabel value="Country" />
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:selectList size="1" value="{!state}">
<apex:selectOptions value="{!states}" />
<apex:actionSupport event="onchange" reRender="a,b,c" />
</apex:selectList>
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:outputLabel value="State" />
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:selectList size="1" value="{!city}" id="a">
<apex:selectOptions value="{!cities}" />
<apex:actionSupport event="onchange" reRender="b,c" />
</apex:selectList>
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:outputLabel value="City" />
</apex:pageblockSectionItem>
<apex:pageblockSectionItem>
<apex:selectList size="1" value="{!city1}" id="b">
<apex:selectOptions value="{!cities1}" />
<apex:actionSupport event="onchange" reRender="c" />
</apex:selectList>
</apex:pageblockSectionItem>
<apex:pageBlockTable value="{!zipList}" var="item" id="c">
<apex:column>
<apex:facet name="header">Zipcode</apex:facet>
<apex:outputText value="{!item['zip']}" />
</apex:column>
<apex:column>
<apex:facet name="header">IB Density</apex:facet>
<apex:outputText value="{!item['num']}" />
</apex:column>
</apex:pageblockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
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
];
}
}