Google map driving directions in Visualforce

[NormanG]

I created a component which contains the gmap API for driving directions.

<apex:component >
    <apex:attribute name="LocationA" description="Location A" type="String" required="true" />
    <apex:attribute name="LocationB" description="Location B" type="String" required="true" />

    <div id="map_canvas" style="width: 100%; height: 375px; background-color: #ffffff;">

    <script src=" http://maps.google.com/—file=api&amp;v=2.x&amp;
    key=ABQIAAAATLMNChkxHLNMBMyJTWj6NBRI1GHY-WN6xuGUGnsHkEIkRmE15BQKtJjUz7L1VCIpVF7qmtbghbpPAA"
    type="text/javascript"></script>

    <script type="text/javascript">

    var dirFrom = '{!LocationA}';
    var dirTo = '{!LocationB}';

    function initialize() {
        if (GBrowserIsCompatible()){
          map = new GMap2(document.getElementById("map_canvas"));
          directionsPanel = document.getElementById("my_textual_div");
          map.setCenter(new GLatLng(49.496675,-102.65625), 3);
          directions = new GDirections(map, directionsPanel);
          directions.load("from: dirFrom to:dirTo");
          }
}

        var previousOnload = window.onload;            
        window.onload = function() {        
         if (previousOnload) {            
         previousOnload(); }  
        initialize();    }
    </script>
 </div>
</apex:component>

 The page which references the controller:

<apex:page standardController="Account" showheader="false">
  <c:DrivingDirection 
  LocationA="{!Account.BillingPostalCode}+{!Account.BillingState}+{!Account.BillingCountry}" 
   LocationB="{!$User.PostalCode}+ {!$User.State}+ {!$User.Street}">
  </c:DrivingDirection>
</apex:page>

I am calling this VF page from a custom button.The content source for the button is URL.

But the page is showing blank with a warning that "the page contains non-secure items".

Appreciate any help on the issue.

Thanks & Regards,

Norman

[TehNrd]

Are you using IE? What happens in firefox?

[NormanG]

I used IE, Firefox as well as chrome.

It's not showing up in any one of them.

Thanks for replying back.

Regards,

Norman

[Shakil]

  LocationA="{!Account.BillingPostalCode}+{!Account.BillingState}+{!Account.BillingCountry}" 
   LocationB="{!$User.PostalCode}+ {!$User.State}+ {!$User.Street}">

In above comments remove + with space and try, make sure it pass expected parameter details to gmap. first try by sending hardcoded address. let see

[NormanG]

Hi,

I tried removing spaces but the result was same.

The blank page is showing that the security certificate is issued to *.na5.force.com

Is it an issue of the gmap api key?

I tried generating the key for all instances but the result was same.

I wonder if I can pass in values to direction.load() for the API.

Thanks for replying.

Cheers,

Norman

[Amit Vaidya]

I have tried above code. I have added the above component and saved it and futher i am added the VF code but it's unable to save. It is giving error "Syntax Error". Plz suggest  me a solution for this.