Monthly Archives: December 2010

Using Google Maps API keys on sites with multiple domain names

We had an error message on a client’s site that read something like:

“Error: You Google Maps API key needs updating.”

So far so simple, go and generate a new API key which should look a little something like this:

// Note: you will need to replace the sensor parameter below with either an explicit true or false value.
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAACFstjnjkgkzkvm89Q7I1ehQ8rLNggDGnTj1_01CfjEtYdR51pBR49BdeA_tqUtwCLMRE-T-IxL4uCg" type="text/javascript"></script>

Despite testing the client insisted this wasn’t working. It turned out that there were two domains a .com and .co.uk.

For each domain you need a different API key. Google provides some good documentation on how to combat this problem, however this worked sporadically and not at all on Internet Explorer, so I tried this bit of javascript (it needs to be placed in an external javascript file)

var address = (window.location.host);
// returns the page url

if (address == "yourwebsitename.com") {
document.write ("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourFirstGoogleMapsAPI' type='text/javascript'></script>");

} else {

document.write ("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourSecondGoogleMapAPI' type='text/javascript'></script>");

}

Now this all worked fine apart from on Internet Explorer again. This was because:

var address = (window.location.host);

Most browsers return the following string:

yourwebsitename.com

However Internet Explorer returns:

www.yourwebsitename.com

But adding an extra else if statement solved this (and would also work for very other additional domain name if you have more that two).

var address = (window.location.host);
// returns the page url

// condition for first domain name

if (address == "yourwebsitename.com") {
document.write ("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourFirstGoogleMapsAPI' type='text/javascript'></script>");

// condition for first domain in Internet Explorer

} else if (address == "www.yourwebsitename.com"){

document.write ("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourFirstGoogleMapAPI' type='text/javascript'></script>");

// condition for second domain name in ALL browsers

} else {

document.write ("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourSecondGoogleMapAPI' type='text/javascript'></script>");

}