• Website and Flash Development
  • Content Management Systems
  • .NET, PHP And More!

Google Maps API Key Issues Across Development Environments

So, one of our latest projects allowed us to dive into the Google Maps API. What a great utility! It is really easy to do incredibly complex mapping functionality. Can you imagine how difficult this stuff would be 5 years ago?
 
For the API to work properly, the developer must use a key that is generated for a specific URL. But what happens if the site is accessed via different URL's? For example: your staging machine is internal to your network and you access it via and internal IP address, but your client accesses it via a sub domain of your main website. Or, you have an automated deployment of code from source control, but the key that you have checked in relates to you local development environment. In this post I will show you how to create a logical work around so you never have to worry about this again.
 
First, we need to determine all of the environments that the Google Maps API will reside in. This may include Local, Staging, QA and Live. Go to http://code.google.com/apis/maps/signup.html and register these URLs to receive you new API keys.
 
Second, we need to determine what language you will be using for your site. This is very likely to be ASP.NET, ASP or PHP. In this example I will demonstrate in Classic ASP for now, just so we can get the gist of what is going on. If anyone is interested in doing this in other languages, let me know and I will add them to this post.
1. Create the conditional statement that determines what environment you are using. Something like this:
if Request.ServerVariables("SERVER_NAME") <> "localhost" then
 

end if
 
2. Now place the Google Javascript with the corresponding key for this environment.
if Request.ServerVariables("SERVER_NAME") <> "localhost" then
response.write("<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA" type="text/javascript"></script>")
end if
 3. For any additional environments just add a new else if into the mix

 
if Request.ServerVariables("SERVER_NAME") <> "localhost" then
response.write("<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA" type="text/javascript"></script>")
else if Request.ServerVariables("SERVER_NAME") <> "StagingURL" then
response.write("<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA" type="text/javascript"></script>")
end if

 
There you have it! It is a little time consuming at first, but trust me, you will save a lot of time and headaches if you prepare for site environment transitions ahead of time.

 
Hope this was useful! if you have any suggestions for future content, feel free to send them to us.