function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SuvraSuvra 

Incorporating Google Map in SalesForce

Hi,

 

I need to Incorporate Google Map into salesforce. For that I generated one API Key and used that key in the following Visual Force page. But after executing the page, Map is not getting loaded.

 

<apex:page standardController="Account" sidebar="false">
<apex:variable var="DestAddress" value="{!account.billingstreet}, {!account.billingcity}, {!account.billingstate}, {!account.billingpostalcode}"/>
<apex:variable var="SourceAddress" value="from: 500 Memorial Drive, Cambridge, MA to: "/>
<apex:variable var="address" value="{!SourceAddress} {!DestAddress}"/>
<!--<apex:outputPanel >
<apex:outputLabel value="{!account.name}"/>
</apex:outputPanel>-->

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   
    <script src="http://maps.google.com/maps?
    file=api&v=2&key=ABQIAAAAAU2IOEFrV1LYavl7OvxJjBQwNgRt8BDbI5KFRawO0dUAA_H1zxTwu7jPL6-
    izlVOZ3V76V8efAsRpA" type="text/javascript"></script>     
    <script type="text/javascript">
    // Create a directions object and register a map and DIV to hold the
    // resulting computed directions

    var map;
    var directionsPanel;
    var directions;
    var addressScript = "{!address}";
   
      
    function initialize() {    
     
     
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(42.351505,-71.094455), 15);
      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load(addressScript);
    }
    </script>
  </head>
 
   <body onload="initialize()">
         
    <div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
    <div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div>
   

   
    <br/>
  </body>
  </html>
</apex:page>

 

 

Kindly help me in solving the problem. This is for getting direction in Map,where the central location is the address of current account selected.Don't understand if anything else is also required with this.

Best Answer chosen by Admin (Salesforce Developers) 
SuvraSuvra

Hi,

 

Thanks for the suggestion..

Actually, we need to minimize the use of s-controls in salesforce. Instead we can use VF. So, i tried the code purely in Visual Force Page. I generated the key for the following url :

 

https://suvra.na6.visual.force.com/apex/

 

and teh key is  

"ABQIAAAAAU2IOEFrV1LYavl7OvxJjBR40BZvbDQwFS2t3SbxsCD7Ete1hhR7lBeH84nW9buCBPsB_zWEksNYTg"

 

But when i'm using this key in the VF page, the map is not loading..its throwing error like : "The Google Maps API Key used on this web site was registered for different web site."

 

  Kindly help me out of this..

 

Thanks and Regards, 

Suvra

All Answers

NaishadhNaishadh

Hi,

 

It is working fine for me. Here is the code. you need to put your key in the code.

 

<apex:page showHeader="false" sidebar="false">
<apex:scontrol controlName="Map_Directions" width="-100" height="1000"> </apex:scontrol>
</apex:page>

 

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Google Maps JavaScript API Example: Advanced Directions</title>

<link href="/dCSS/Theme2/default/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv"

rel="stylesheet">

<link href="/dCSS/Theme2/default/custom.css" type="text/css" media="handheld,print,projection,screen,tty,tv"

rel="stylesheet">

<!-- key for google map

ABQIAAAAVm9bIMcEB4fWBYhJHfTXJxSE4KmzBIakzLBuRJDDBb2h-0ljxRQ98t3R4xNfXSL9PtSdx9l90X5E6A

-->

<script src="
http://maps.google.com/?file=api&amp;v=2.x&amp;key=yourkey"

type="text/javascript"></script>



<script src="/js/functions.js" type="text/javascript"></script>



<script type="text/javascript" src="/soap/ajax/13.0/connection.js"></script>



<style type="text/css">

body {

font-family: Verdana, Arial, sans serif;

font-size: 11px;

margin: 2px;

}

table.directions th {

background-color:#EEEEEE;

}



img {

color: #000000;

}

</style>



<script type="text/javascript">



var map;

var gdir;

var geocoder = null;

var addressMarker;

var dirFrom = '{!$Request.from}';

var dirTo = '{!$Request.to}';

var mapLocale = ""

var SControlID = '{!$Request.lid}';

var SFrameIC = '{!$Request.ic}';





function initValues()

{

mapLocale = "en_US";



setInputFields(dirFrom,dirTo);

}



function setInputFields(from, to)

{

window.document.getElementById("fromAddress").value = from;

window.document.getElementById("toAddress").value = to;

}





function initialize()

{

initValues();



if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map_canvas"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

gdir = new GDirections(map, document.getElementById("directions"));

GEvent.addListener(gdir, "load", onGDirectionsLoad);

GEvent.addListener(gdir, "error", handleErrors);



setDirections(dirFrom, dirTo, mapLocale);

}

}



function setDirections(fromAddress, toAddress, locale) {

if ((fromAddress) && (toAddress))

gdir.load("from: " + fromAddress + " to: " + toAddress,

{ "locale": locale });

}



function handleErrors()

{

if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

alert("No corresponding geographic location could be found for one
of the specified addresses. This may be due to the fact that the
address is relatively new, or it may be incorrect.\nError code: " +
gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)

alert("A geocoding or directions request could not be successfully
processed, yet the exact reason for the failure is not known.\n Error
code: " + gdir.getStatus().code);



else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)

alert("The HTTP q parameter was either missing or had no value. For
geocoder requests, this means that an empty address was specified as
input. For directions requests, this means that no query was specified
in the input.\n Error code: " + gdir.getStatus().code);



// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong

// alert("The geocode for the given address or the route for the
given directions query cannot be returned due to legal or contractual
reasons.\n Error code: " + gdir.getStatus().code);



else if (gdir.getStatus().code == G_GEO_BAD_KEY)

alert("The given key is either invalid or does not match the domain
for which it was given. \n Error code: " + gdir.getStatus().code);



else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)

alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);



else alert("An unknown error occurred.");



}



function onGDirectionsLoad(){

// Use this function to access information about the latest load()

// results.



// e.g.

// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;

// and yada yada yada...

}

</script>



</head>

<body onload="initialize()" onunload="GUnload()">

<div style="background-color: #CCCCCC">

<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

<table>

<tr>

<th align="right">

From:&nbsp;</th>

<td>

<input type="text" size="25" id="fromAddress" name="from" value="" /></td>

<th align="right">

&nbsp;&nbsp;To:&nbsp;</th>

<td align="right">

<input type="text" size="25" id="toAddress" name="to" value="" /></td>

<th align="right">

Language:&nbsp;</th>

<th align="right">

<select id="locale" name="locale">

<option value="en" selected="selected">English</option>

<option value="fr">French</option>

<option value="de">German</option>

<option value="ja">Japanese</option>

<option value="es">Spanish</option>

</select>

</th>

<td>

<input name="submit" type="submit" value="Get Directions!" class="button" /></td>

</tr>

</table>

</form>

</div>

<div style="border-width: 1px; border-color: #000000; border-style: solid;">

<div style="overflow: auto; width: 99.5%; height: 380px">

<table class="directions" style="width: 100%; height: 100%">

<tr>

<td valign="top" style="width: 275px;">

<div id="directions" style="width: 275px; background-color: #ffffff;">

</div>

</td>

<td valign="top">

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

</div>

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

SuvraSuvra

Hi,

 

Thanks for the suggestion..

Actually, we need to minimize the use of s-controls in salesforce. Instead we can use VF. So, i tried the code purely in Visual Force Page. I generated the key for the following url :

 

https://suvra.na6.visual.force.com/apex/

 

and teh key is  

"ABQIAAAAAU2IOEFrV1LYavl7OvxJjBR40BZvbDQwFS2t3SbxsCD7Ete1hhR7lBeH84nW9buCBPsB_zWEksNYTg"

 

But when i'm using this key in the VF page, the map is not loading..its throwing error like : "The Google Maps API Key used on this web site was registered for different web site."

 

  Kindly help me out of this..

 

Thanks and Regards, 

Suvra

This was selected as the best answer