function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NormanGNormanG 

Google map driving directions in Visualforce

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

 

TehNrdTehNrd

Are you using IE? What happens in firefox?
NormanGNormanG

I used IE, Firefox as well as chrome.

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

Thanks for replying back.

 

Regards,

Norman
ShakilShakil
  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
NormanGNormanG

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 VaidyaAmit 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.