Handling Google Maps API Keys with ASP.NET MasterPages and Web.config
The Google Maps API requires you to generate a key that is tied to the URL where the map will be deployed. This can be inconvenient if the site exists in multiple places at the same time…as is the case in many development scenarios:
- Develop
- Test
- Deploy
These three stages can also represent physical locations. Development is done locally, moved to an internal testing server for QA, and finally deployed to the production server. There is frequently a lot of overlap between these stages and locations as bugs are discovered and ironed out or new features added. Managing multiple Google Maps API Keys between all these URL’s can be a hassle.
The Trick
Sign up for the Google Maps API for every URL the site will exist on. Add the keys to the appSettings section of Web.config.
<appSettings>
<!-- Google Map API Keys -->
<add key="localhost" value="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZp8x8mYJMinyKDbF6G7bBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQBOooHv6EDaUJi3lHupS34T4CM5Q"/>
<add key="testserver" value="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZp8x8mYJMinyKDbF6G7bBT4S2onT7717RtVeZs20MVAELzRRBSlPqEN-WtDpPooS4i4Rvu50CucoA"/>
<add key="www.productionserver.com" value="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALZp8x8mYJMinyKDbF6G7bBQzDH33YNyRzvKBWbxIa_7sg2mVwBRnO7qb_i1DY0Vhq-a8wXtFVXcMkg"/>
</appSettings>
Now, register the script in the code behind for the page that needs it.
protected void Page_Init(object sender, EventArgs e)
{
if (!Page.IsStartupScriptRegistered("googleMapScript"))
{
// Register Startup Script for Google Maps API
string myScript = "<script type=\"text/javascript\" src=\"" + ConfigurationManager.AppSettings[Request.ServerVariables["SERVER_NAME"]] + "\"></script>";
this.Page.ClientScript.RegisterStartupScript(typeof(Page), "googleMapScript", myScript);
}
}
You’re done!
PS: I know my code blocks are not too hip right now (overflowing onto the navigation and sidebar). It’s on the list.
Handling Google Maps API Keys with ASP.NET MasterPages and Web.config…
You’ve been kicked (a good thing) – Trackback from DotNetKicks.com…
Trackback on December 8, 2006 @ 3:03 pm
This is a great idea.
But………….
with my code this loads the API key at the end of the page. Too late to do everything it needs to do. If I load the key through the Javascript at the head of the page, it loads early enough to do its job. I can get a map with this approach but I can’t do all the trick stuff I normally accomplish as the key loads at the end of the page.
Comment on June 13, 2007 @ 8:44 pm
@Mike – Hmmm, I’m not sure why it’s not working for you. If you’d like to provide a code sample or a link I’d be happy to take a look at it for you (no promises though).
By the way, I removed the link to the Vacation Rental site you submitted as your URL. It looked suspiciously like a tricky attempt to sneak links to your online business onto my site. A word of advice, don’t do that…it pollutes your credibility.
Comment on June 13, 2007 @ 9:03 pm
Shane,
Thanks for the offer. I won’t distract you with my code. I’m hoping these posts on your page are useful to others who are also searching of a good way to include their Google map api keys in their web.config file.
As far as I can tell; the approach you have described loads the key at the end of the page (I assume you’ve looked at your page source in your browser and agree). The convention is to load the api key at the head of a page (or at least before the map script). For a simple map with a default Google icon this does not matter, but when you start adding other stuff like your own icons etc loading the key at the end of the page confounds a lot of code.
The solution for me will be a method that loads the key at the start of the page or near to it. In other words the key has to load before the script that loads the map is run and not after it, as in this example. If I take the current javascript that loads my api key and move it to a point after the map script I get the same result as using this approach.
Thanks again for presenting this, I’ve not seen this anywhere else on the web. And if I had a better understanding of .net code I expect I’d figure out the answer, however at this point every trick I’ve tried (with the key in my web.config file) loads the api key after my map. The only solution I have right now is to load the key using javascript before the map script runs (and I keep all my keys in the page and comment out the ones that are not being used).
Thanks again,
Any suggestions you have are most welcome.
Mike.
Comment on June 14, 2007 @ 12:33 pm
@Mike –
I tried to locate the orginal code where I developed this solution, but I have been unable to find it. After I developed this, we ended up abandoning the map because it didn’t serve the greater purpose of the application we were developing.
Comment on June 14, 2007 @ 2:16 pm
Good solution came very handy to solve my issue I had at work.
If someone have issue with placing javascript it seems to work just fine with
Response.Write(“your java script”)
Comment on September 29, 2007 @ 8:05 pm
Hi… I faced similar problem becos my website could be reached in several ways and Google would generate false bad-key message.
So, I did the following:
I created a separate map.html file that loaded the google map and additional stuff. Then I kept map.html in a given web location. On all the pages where I have to show the map I loaded the map.html within that html.
Way to load that mapfile within another html:
Since this location fixed, key is also fixed.
Thanks!!
Comment on November 18, 2007 @ 12:31 pm