Lemon and Lime Design » Using Google Maps with 2 URLs pointing to one website.

Using Google Maps with 2 URLs pointing to one website.

on May 08 in How To tagged Google Maps by Dave

The Problem:

When you register for a google maps api key it can be only used with one URL. I have came across the problem with a number of sites that I have developed that the client wants 2 or more URLs and google maps integration. There is a very simple way to get around this with just a small piece of Javascript.

Solution:

Firstly, register your URLs and get the API key for each and follow the steps provided on the introduction to get a map up and running.

Once you have it working for one URL then all is needed for the others to work is a simple piece of JavaScript code.

<script type="text/javascript">

function checkURL(){ if(document.URL == 'http://www.yoursite.com/yourpage'){ locationKey = "key_for_one_url"; } else{ locationKey = "key_for_other_URL"; } var part1 = '<script src="http://maps.google.com/maps?file=api&v=2&key=';

var part2 = '" type="text/javascript">'+ '';

document.write(part1+locationKey+part2);
}
checkURL();

So Basically, all you have is a function that checks what URL is accessing the site and then switching the keys, we will look at it line by line.

Firstly, document.URL checks the URL of the accessed document, this returns the full URL.

Next, we declare the variables we will be using, I found it easier to break up the text. 'part1' is everything up to the declaring the key. After that we add the 'locationKey', the API key that needs to be used and the the final part of text, 'part2'.

The final step is to write the result to the document using document.write() and then call the function.

Hope this helps, leave a comment and let me know how you get on or if you have any more tips I would love to hear them.