How to embed Google Maps in Google Sites

This may seem very obvious, but anyone who's been there knows that copying and pasting the HTML code does not work. The official gadget doesn't work either - you need an API key for that. In fact, I spent a good 1.5 hours wading knee deep in iframes and parameters before realising that the crux of the problem was superfluous ampersand codes. Ah the irony of it all. Being the kindly soul I am, I'm obliged to write up this tutorial in case anyone is tearing their hair out over this matter. Not that I've done so, mind you. (Close though.)

Right. Chop chop.

1. In the Google map you want to embed, click on "link" (in the top right corner), then copy the contents of the box labelled "Paste HTML to embed in website".

2. Paste the chunk of code into Notepad or some other text editor, and locate the URL that comes after "src=". Discard the rest. Then do a search (Ctrl+f) for "amp;", and remove every single instance of "amp;" in the code.

3. In the Google Sites page editor, click on "Insert" > "More" > "Add gadget by URL". Here's the URL:
http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/my_gadgets_gs.xml

(Updated 21.7.09. The old link from philippe.chappuis.googlepages.com doesn't work anymore)

4. Once you click "Add" the setup panel should come up. Grab the modified code from step 2 and paste it into the "File" field. Adjust settings as needed, click "OK", and voilà - there you have it!

All we're doing here is employing a gadget that does the work of an iframe. (The gadget in question comes from [this page].) But for some stupid reason the iframe codes given out by Google Maps have ampersand codes in place of "&" which renders them quite useless. Ampersand codes are used in HTML to make sure symbols display properly - beats me why they would turn up here.

More on ampersand codes:

HTML Ampersand Character Codes

Slightly tangential - a useful list of parameters I came across earlier:

Google Map Parameters