Appending dynamic values to link

I'm embedded a Google maps iframe into my site but I need to automatically enter address into it.

The address will come from this input's value:

<input type="hidden" id="addr" value="{$ads.e_53.value}">

Code (markup):

And it will be set in this:

document.getElementByID('addr').value;

Code (markup):

I need the value of 'addr' to replace "san%20francisco" in red:

<iframe src="http://www.map-generator.net/extmap.php?name=Spot&amp;address=[color="red"]
[B][SIZE="3"]san%20francisco[/SIZE][/B][/color]&amp;width=335&amp;height=200&amp;maptype=map&amp;zoom=14"
 marginwidth="0" marginheight="0" frameborder="0"
 height="200" scrolling="no" width="335"></iframe>

Code (markup):

So when the page loads that new address will load in the map. Any help would be appreciated.