Google Maps with Salesforce VF Page

Question

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
        ];
    }
}

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);
..............
..............