How-To's with Fission CMS: Embed or Link a Google Map

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!

You Can Also See This Article at our Help Desk

How to Get Started:

• Start off by visiting https://maps.google.com.
• 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.
• Hit enter on your keyboard.
• When the proper address listing is brought up, click the 'gear' icon in the lower right corner and select Share and Embed Map.

Link Map

This will provide a link to the full-sized Google Map on the https://maps.google.com website only.

• Select the Share Link tab at the top of the popup box.
• 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.)
• 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: How to Hyperlink.

Embed Map

This will provide an interactive map of your location on your website. Visitors can zoom in/out of the map, in addition to selecting a link which will direct to the full Google map, which can then provide driving directions.

Selecting Dimensions

• Select the Embed Map tab at the top of the popup box.
• 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.
• 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.
• To view an exact size representation of your Custom Size, click the Preview Actual Size option to bring it up in a popup window.
• 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.
• Highlight and copy the source code in the field beneath. It will being with "<iframe src=".

Embedding Code

• Open up your content page and select the Content Editor tab.
• 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.
• Once your cursor is flashing in the desired position of the map, select the Source tab at the bottom of your editor window.
• Paste the code you had just copied
• Click to the Preview tab (located to the right of the Source tab) to see how it will look on the page when it is saved.
• If you need to make adjustments to the map dimensions, go back to the Source tab.
• At the beginning of the 3rd line of the code, you will see the dimensions. In this example, it is: width="600" height="400"
• Change the respective numbers between the parentheses and flip back to the Preview tab to see the change. Be sure to NOT delete or change any other part of that code (the opening and closing parentheses to each dimension should still be intact.)
• Once you are all set, you can flip to the Design tab to make any other content changes, or you can just Save & Close.
  

Are you looking to Optimize Your Fission Website for 2015? Request a Quote today to get started.