Google Plus and Google Maps - Embedding Content

Embedding a Google+ Button   

You can paste the HTML code from Google straight into a PanPage Raw/HTML item, and you can tweak things a little on the way...

The first step is to create a Raw/HTML item where you want the button to appear in your website.  Next get your Google+ code here.  You can also find it under 'Business Solutions' at the bottom of Google's home page.

Note that Google tells you to paste the code into two different places in your website but you can get away with pasting it all together in a single Raw/HTML item.  It may not be completely correct but it works!

Embedding a Google Map

You can paste a Google Map into a PanPage Raw/HTML item in much the same way as the button above....

Create a Raw/HTML item where you want the map to appear in your website.  Take note of the width (in pixels) of the column containing this item as that is the maximum width of map you can embed.

Next, in Google, navigate to the map you want to display and click the 'link' button at top right (see picture right).

Click the link 'Customise and Preview Embedded Map'.

Choose 'Custom Width' and enter the width of the column you looked up earlier.  Enter a suitable height too.

Google shows the map at corect size and the HTML code is in a box below. 

Click in the code box and press [Ctrl+A] then [Ctrl+C} or right click and choose 'Select All' then again and choose 'Copy'.

Now go back to your PanPage item. Click in the edit window and press [Ctrl+V] or right click and choose 'Paste'.  This will copy the HTML code into your item.

Click the Save button then go and see how the page looks.