Can I inject google AJAX API autoload anywhere else than globally?

There is this issue I am struggling with. I know that the autoload for the google visualization geomap must be in the part of your document.

The thing is every time I reload some other pages in my application the google reloads everything and this I want to take out. So I tried taking the :

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22geomap%22%2C%22table%22%5D%7D%5D%7D"></script>

out of my global template and inject it when the page call happens. So to only load the google API when I need it so to keep loading times to an absolute low. I want to know if this is do-able and if the google autoload MUST exist in the global at all times.

I am using Prototype Javascript framework and here is my code to inject the autoload :

var element = new Element('script', {
    src: "http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22geomap%22%2C%22table%22%5D%7D%5D%7D",
    type: 'text/javascript'
});

$$('head')[0].appendChild(element);

This keeps it out of the rest of 开发者_StackOverflow社区the site but doesn't work at all. Am I thinking about this wrong or is there some possibility of me only loading the API in one place and not everywhere.

Thank you

It seems like if you do it in the template of the view you are using it works fine. Every time the template gets rendered it refreshes the page resulting in the Google API code loading.