Embed or Link to a Google Map (CK Editor)

Google Maps is a free service that provides an interactive map of your location as well as directions to your business address. You have the option of embedding the map on your webpage, linking to the full size Google map, or even both!

1. Start off by visiting https://www.google.com/maps.
2. Enter the name of your business in the search bar in the upper left. If your business is verified on Google Places, it will begin to auto-fill with location(s) of the business name. If this is the case, just select it from the list below. If your business name is not displaying for the proper address, simply restart by typing the address in.
3. Hit enter on your keyboard.
4. When the proper address listing is brought up, click the settings icon in the upper left corner and select Share or Embed Map.

Link Map

1. This will provide a link to the full-sized Google Map on the https://www.google.com/maps website only.
2. Select the Share Link tab at the top of the popup box.
3. You can highlight and copy the full URL from here. You can also choose to use the short URL which reduces the URL to about 20 characters, for a cleaner look. To do that, simply click the Short URL checkbox above. (Both URLs will function the same.)
4. After you've highlighted and copied the entire URL that was provided, you can select the appropriate text to link from on your website. For more information about hyperlinking, please see: Setting a Link.

Embed Map

Selecting Dimensions

1. Select the Embed Map tab at the top of the popup box.
2. Choose the size of the map from the drop-down picker to the left. Each standard selection will provide you an exact representation of its size after you click it. You can also choose a custom size.
3. If you select the Custom Size option, you will be prompted to enter in a set of pixel dimensions in the boxes that follow. The first is the width, second is the height. We recommend to try to keep a 16x9 or 4x3 aspect ratio. However, this is completely customizable to fit your needs, which may vary depending on where you are putting this and how much room is allotted.
4. To view an exact size representation of your Custom Size, click the Preview Actual Size option to bring it up in a popup window.
5. If you're unsure of what size to select, leave it at one of the default settings, preferably Small. This can always be adjusted later.
6. Highlight and copy the source code in the field beneath. It will being with "<iframe src=".

Embedding Code

1. Open up your content page and select the Content Editor tab.
2. In the page, place your cursor where you would like the map to be located. If you plan on floating the map to the right side of your contact information, you can create a table and place it in the right column. For more information on tables, please see: Adding a Basic Table.
3. Once your cursor is flashing in the desired position, type in your name in all caps. This will help us locate where we will need to paste Google's code.
4. Select the Source button at the top of your editor window.
5. Locate your name in the code. Place your cursor after the last letter of your name, then, on your keyboard, hold CTRL and hit the V key to paste the code you had just copied. 
6. Click to the Page Preview button (located to the right of the Source button) to see how it will look on the page when it is saved.
7. If you need to make adjustments to the map dimensions, return to the Source.
8. At the beginning of the 3rd line of the code, you will see the dimensions. In this example, it is: width="400" height="300"
9. Change the respective numbers between the quotation marks and select the Page Preview button to see the change. Be sure NOT delete or change any other part of the code.
10. Once you are all set, you can return to the editor by clicking on the Source button once again, or you can just Save & Close.