0

I am building a force.com site to create a form to submit form in my Salesforce. I want to integrate Google Maps API, which I have done in my page using JavaScript.

I would like to display the address entered in the form on google maps. I have Billing Street, Billing City and Zipcode. I am trying to figure out a way to show the location on the map based on the Stree,City and Zipcode entered by the user.

The location should be displayed before the user clicks save button on the page. Below is my VF page so far:

<apex:page standardController="Account" Extensions="RedirectionClass" sidebar="false" showHeader="false">
    <apex:form >

    <apex:pageBlock title="Add an Account">
<apex:pageMessages />
<apex:pageBlockSection columns="1">
    <apex:inputField value="{! Account.Name }"/>
     <apex:inputField value="{! Account.Owner.Name}"/>
        <apex:inputField value="{!account.BillingStreet}" />
        <apex:inputField value="{!account.BillingCity}" />
        <apex:inputField value="{!account.BillingState}" />
        <apex:inputField value="{!account.BillingCountry}" />
        <apex:inputField value="{!account.BillingPostalCode}" />
    <apex:inputField value="{! Account.Phone }"/>        
    <apex:inputField value="{! Account.Industry }"/>        
    <apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>


    <style>
      #map {
        width: 500px;
        height: 400px;
        background-color: #CCC;
      }
    </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<apex:pageBlock >
<div id="map"></div>
</apex:pageBlock>

        <apex:pageBlockButtons >
            <apex:commandButton action="{! save }" value="Save" />        
        </apex:pageBlockButtons>

    </apex:pageBlock>


    </apex:form>
</apex:page>

How can I do this in this VF page?

1

Checkout this post - you do not need to do anything specific to SFDC platform - simply code it in Javascript on the Visualforce page:

Using Address instead of Longitude and Latitude

Just add an onblur to the input fields, put the address through the API and then update the map widget in your page.

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.