Google Maps API Key Error in Visualforce?

Hi all

I've created a Visualforce page that utilizes the Google Maps API to both create and display and map and do some geocoding. The page works, but I get the pop-up error at the beginning that says:

"The Google Maps API key used on this web site was registered for a different web site. You can generate a new key for this web site at http://code.google.com/apis/maps/."

I'm making the request from https://na2.salesforce.com and am using the key ABQIAAAA9wWHEGNCfZW2F9-qCEHgohQ72da4xWLg1N8Ce02Xdu0VxpZsuRQSY7XJzvVLWb1SH9-ZtUeYmXh5_Q. This is the key Google gives me for https://na2.salesforce.com. I've also tried it with the key for http://na2.salesforce.com.

This is what my script tag looks like:

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9wWHEGNCfZW2F9-qCEHgohQ72da4xWLg1N8Ce02Xdu0VxpZsuRQSY7XJzvVLWb1SH9-ZtUeYmXh5_Q" type="text/javascript"></script>

Again, the page works. I just get the error when it loads.

Any ideas?

Thanks!!

Michael

June 24, 2008
·
Answer
·
Like
0
·
Follow
0

Ron Hess
can you share the VF code, it may help to debug what you are seeing

in the past, when i see that message the maps do not work at all.

June 24, 2008
·
Like
0
·
Dislike
0

Michael Haddad.ax365
Hi Ron

Thanks for the help. I've taken out my JavaScript, but this shows the page that is giving the error.

Code:
<apex:page id="entryPoint"> <script src="http://maps.google.com/maps—file=api&v=2&key=ABQIAAAA9wWHEGNCfZW2F9-qCEHgohQ72da4xWLg1N8Ce02Xdu0VxpZsuRQSY7XJzvVLWb1SH9-ZtUeYmXh5_Q" type="text/javascript"></script> <script type="text/javascript" src="/js/functions.js"></script> <script src="/soap/ajax/13.0/connection.js" type="text/javascript"/> <script type="text/javascript" src="http://ws.geonames.org/export/geonamesData.js"/> <script src="{!$Resource.Prototype}" type="text/javascript"/> <apex:pageBlock title="Hello {!$User.FirstName}! Welcome to Entry Point." id="mainPageBlock"> <div id="firstPage"> <div class="screenTitle">Search Leads, Contacts, and Accounts.</div> <apex:form id="LCASearchForm"> <apex:panelGrid columns="2"> <apex:outputLabel value="First Name:" for="firstNameInput" styleClass="formLabel"/> <apex:inputText id="firstNameInput" required="true" styleClass="formInput" onkeyup="searchLCA(document.getElementById('{!$Component.firstNameInput}').value, document.getElementById('{!$Component.lastNameInput}').value, document.getElementById('{!$Component.companyInput}').value, document.getElementById('{!$Component.emailInput}').value, document.getElementById('{!$Component.phoneInput}').value)"/> <apex:outputLabel value="Last Name:" for="lastNameInput" styleClass="formLabel"/> <apex:inputText id="lastNameInput" required="true" styleClass="formInput" onkeyup="searchLCA(document.getElementById('{!$Component.firstNameInput}').value, document.getElementById('{!$Component.lastNameInput}').value, document.getElementById('{!$Component.companyInput}').value, document.getElementById('{!$Component.emailInput}').value, document.getElementById('{!$Component.phoneInput}').value)"/> <apex:outputLabel value="Company:" for="companyInput" styleClass="formLabel"/> <apex:inputText id="companyInput" required="true" styleClass="formInput" onkeyup="searchLCA(document.getElementById('{!$Component.firstNameInput}').value, document.getElementById('{!$Component.lastNameInput}').value, document.getElementById('{!$Component.companyInput}').value, document.getElementById('{!$Component.emailInput}').value, document.getElementById('{!$Component.phoneInput}').value)"/> <apex:outputLabel value="E-mail:" for="emailInput" styleClass="formLabel"/> <apex:inputText id="emailInput" required="true" styleClass="formInput" onkeyup="searchLCA(document.getElementById('{!$Component.firstNameInput}').value, document.getElementById('{!$Component.lastNameInput}').value, document.getElementById('{!$Component.companyInput}').value, document.getElementById('{!$Component.emailInput}').value, document.getElementById('{!$Component.phoneInput}').value)"/> <apex:outputLabel value="Phone:" for="phoneInput" styleClass="formLabel"/> <apex:inputText id="phoneInput" required="true" styleClass="formInput" onkeyup="searchLCA(document.getElementById('{!$Component.firstNameInput}').value, document.getElementById('{!$Component.lastNameInput}').value, document.getElementById('{!$Component.companyInput}').value, document.getElementById('{!$Component.emailInput}').value, document.getElementById('{!$Component.phoneInput}').value)"/> <input type="button" class="btn" style="margin-top:10px;" value="Create New Lead" onclick="createNewLead()"/> </apex:panelGrid> </apex:form> <br/> <div id="LCASearchResults" style="display:none"> <apex:pageBlockSection title="Search Results" columns="1"> <apex:pageBlockSectionItem > <div class="resultDiv"> <div id="leadStatus"></div> <table id="leadResults" class="resultTable"></table> </div> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <div class="resultDiv"> <div id="contactStatus"></div> <table id="contactResults" class="resultTable"></table> </div> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <div class="resultDiv"> <div id="accountStatus"></div> <table id="accountResults" class="resultTable"></table> </div> </apex:pageBlockSectionItem> </apex:pageBlockSection> </div> </div> <div id="secondPage" style="display:none"> <div class="screenTitle">Search Locations.</div> <table width="100%"><tr> <td width="50%"><apex:form id="LocationSearchForm" style="float:left"> <apex:panelGrid columns="2"> <apex:outputLabel value="Zip Code:" for="zipCodeInput" styleClass="formLabel"/> <apex:panelGroup > <apex:inputText id="zipCodeInput" required="true" styleClass="formInput" onkeyup="findZip(this.value)"/> <span id="zipStatus" style="display:none; margin-left:10px">SEARCHING ZIPS</span> </apex:panelGroup> <apex:outputLabel value="City:" for="cityInput" styleClass="formLabel"/> <apex:inputText disabled="true" id="cityInput" required="true" styleClass="formInput"/> <apex:outputLabel value="State:" for="stateInput" styleClass="formLabel"/> <apex:inputText disabled="true" id="stateInput" required="true" styleClass="formInput"/> <apex:outputLabel value="Street Address:" for="streetInput" styleClass="formLabel"/> <apex:inputText id="streetInput" required="true" styleClass="formInput" onkeyup="searchLocation()"/> <apex:outputLabel value="Latitude:" for="latitudeOutput"/> <apex:outputText id="latitudeOutput" value="TBD"/> <apex:outputLabel value="Longitude:" for="longitudeOutput"/> <apex:outputText id="longitudeOutput" value="TBD"/> <apex:outputLabel value="Coax Distance:" for="coaxDistanceOutput"/> <apex:outputText id="coaxDistanceOutput" value="TBD"/> <input type="button" class="btn" style="margin-top:10px;" value="Create New Location" onclick="createNewLocation()"/> </apex:panelGrid> </apex:form> </td> <td width="50%"><div id="map" class="map" style="display:none; width: 400px; height: 300px"></div></td> </tr></table> <div id="LocationSearchResults" style="display:none"> <apex:pageBlockSection id="LocationResultBlock" title="Search Results" columns="1"> <div id="LocationStatus"></div> <apex:form id="LocationResultForm"></apex:form> </apex:pageBlockSection> </div> </div> </apex:pageBlock> </apex:page>

Message Edited by Michael Haddad on 06-24-2008 01:39 PM

June 24, 2008
·
Like
0
·
Dislike
0

Ron Hess
ok, i dropped this into my test org, on tapp0, saw the error message

then generated a new key, and put that into the page , changed &amp to & and it appears to work

here is the line i changed
Code:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbfPnDaL24nk10UVODur46RQ4hZBRKujLa20gdgk6BGq02b_7dRSUc-gU9S7Sru9i0Z4lD1pGbwanwg" type="text/javascript"></script>

Message Edited by Ron Hess on 06-24-2008 02:37 PM

June 24, 2008
·
Like
0
·
Dislike
0

Ron Hess
here is my simple sample , only runs on sandbox currently ( keyed for tapp0.salesforce.com)

if your key is not working, you can try to gen a new key and try that one.

Code:
<apex:page > <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbfPnDaL24nk10UVODur46RQ4hZBRKujLa20gdgk6BGq02b_7dRSUc-gU9S7Sru9i0Z4lD1pGbwanwg" type="text/javascript"></script> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } }); </script> <div id="map" style="width: 500px; height: 300px" ></div> </apex:page>

This could be the start of a custom component...

June 24, 2008
·
Like
0
·
Dislike
0

Michael Haddad.ax365
Thanks Ron!

It's interesting. The map worked before taking out the amp; although I got the error and the polyline I was adding didn't work. Now I don't get the error and the polyline works. Strange behavior!

I have a somewhat unrelated question. What is the procedure for using the AJAX toolkit inside a Visualforce page?

I'm including the scripts as follows:

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

I have it working, but it seems to require me to login in an init function, otherwise I get a Session ID or Session Header error.

sforce.connection.login(USERNAME,PASSWORD);

Do I need to issue this call to use the toolkit in Visualforce?

Thanks!

Michael

June 24, 2008
·
Like
0
·
Dislike
0

Ron Hess
including that you now have two different ajax features on one page,
what are you doing with ajax toolkit that cannot be done better by Visualforce ActionSupport?

i really would like to know, because we want to support your use case with the built in features if possible and not require you to employ the ajax toolkit on a visualforce page.

June 25, 2008
·
Like
0
·
Dislike
0

mrobins123
Hey guys,
I for the life of me can not get the Google Map to load! :( I'm presented with the following message:

"The Google Maps API key used on this web site was registered for a different web site. You can generate a new key for this web site at http://code.google.com/apis/maps/."
Do you know exactly what URL I need to use to generate the key from? I'm testing this in my developer SalesForce.com implementation within a Visual Force page. At this point I'd be happy with the map simply appearing :)

Any help would be greatly appreciated,

Mark

January 30, 2009
·
Like
0
·
Dislike
0

mrobins123
.... ok, got the map to display. Re-generated the API key based on the URL below did the trick.

https://c.na2.visual.force.com/apex/

January 30, 2009
·
Like
0
·
Dislike
0

Suvra
Hi, I am able to generate the Google Map API Key. I'm not getting any error on API Key, but the Map itself is not loading.
Please help.

February 16, 2009
·
Like
0
·
Dislike
0

mrobins123

Suvra,

Could you post the source code so we could take a look to help resolve your issue?

February 17, 2009
·
Like
0
·
Dislike
0

Suvra
sure..

I need to implement it in Visual Force, not S-control. I have the S-Control code working fine..but i converted it to VF code, enclosing it whinthin <apex:page> tag, which is not working.

Below is the S-Control :

<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"/>
<script src="http://maps.google.com/maps?hl=en&output=html;&file=api&v=2&key=ABQIAAAAAU2IOEFrV1LYavl7OvxJjBQwNgRt8BDbI5KFRawO0dUAA_H1zxTwu7jPL6-izlVOZ3V76V8efAsRpA
" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var address = "{!Contact.MailingStreet},{!Contact.MailingPostalCode} {!Contact.MailingCity}, {!Contact.MailingState}, {!Contact.MailingCountry}";
var firstName ="{!Contact.FirstName}";
var lastName ="{!Contact.LastName}";
var name=firstName+' '+lastName;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
geocoder = new GClientGeocoder();
geocoder.getLatLng(
address,
function(point) {
if (!point) {
document.getElementById("map_canvas").innerHTML = address + " not found";
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Customer: </b>'+name+' <br/> <b>Address:</b> '+address+'<br/><img height="50" width="50" src="http://www.visitingdc.com/images/white-house-picture.jpg">'+'<br/> '+'<a href="http://www.econym.demon.co.uk">Testing Link</a>');
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

And the visual Force code is also given below :

<apex: page standardController="Contact" >
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?hl=en&output=html;&file=api&v=2&key=ABQIAAAAAU2IOEFrV1LYavl7OvxJjBR40BZvbDQwFS2t3SbxsCD7Ete1hhR7lBeH84nW9buCBPsB_zWEksNYTg" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var address = "{!Contact.MailingStreet},{!Contact.MailingPostalCode} {!Contact.MailingCity}, {!Contact.MailingState}, {!Contact.MailingCountry}";
var firstName ="{!Contact.FirstName}";
var lastName ="{!Contact.LastName}";
var name=firstName+' '+lastName;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
geocoder = new GClientGeocoder();
geocoder.getLatLng(
address,
function(point) {
if (!point) {
document.getElementById("map_canvas").innerHTML = address + " not found";
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Customer: </b>'+name+' <br/> <b>Address:</b> '+address+'<br/><img height="50" width="50" src="http://www.visitingdc.com/images/white-house-picture.jpg">'+'<br/> '+'<a href="http://www.econym.demon.co.uk">Testing Link</a>');
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>
</apex:page>

Fot this Visualforce page, I generated API Key for the URL :
https://suvra.na6.visual.force.com/apex/
https://suvra.na6.visual.force.com/apex

But both are not working. I mean, its not thowing any error in terms of API key, but the map is not loading.

February 17, 2009
·
Like
0
·
Dislike
0

mrobins123
Hi,
Please post your code so we can help you.

February 18, 2009
·
Like
0
·
Dislike
0

SF_Newbie
Hi all
We've got the same problem.

I've searched the forums and the Google forums and hacve tried all the permutations I can think of.
I'm developing in a personal sandbox at the moment using Firefox 3.0.8

Here's my error msg

The Google Maps API key used on this web site was registered for a different web site. You can generate a new key for this web site at
http://code.google.com/apis/maps/.

Now..... I've generated myself a Google Maps API key using
https://na6.salesforce.com/
http://na6.salesforce.com/
https://na6.visual.force.com/apex/
http://salesforce.com/

and a few more as well.

I've tried removing the amp from the &amp but no joy there either.

The page I generated has the following URL
https://na6.salesforce.com/apex/Google_Page?sfdc.tabName=01r80000000Fvzl

STILL GETTING THE SAME ERROR MSG
Please help!!!

My code is as follows

<apex:page >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

>

<title>Google Maps JavaScript API Example</title>

<script src="http://maps.google.com/maps?

file=api&v=2&sensor=false&key=ABQIAAAA8f0frnZd5eaEpk3VlfvtiRTP-

nQO30TV4MerbYT8p0gD9BDdlBTqYiHXzxUcke-VzgNc9prgM_TtJg"

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

<script type="text/javascript">

function initialize() {

if (GBrowserIsCompatible()) {

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

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

map.setUIToDefault();

}

}

</script>

</head>

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

<div id="map_canvas" style="width: 500px; height: 300px"></div>

</body>

</html>

</apex:page>

Has anyone got any idea why this is happening?

Thx in advance

April 22, 2009
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Google Maps API Key Error in Visualforce?

You need to sign in to do that.