Embedding Maps

Disclaimer

The information contained within the following tutorials is not guaranteed to be up-to-date, as each site updates frequently and without prior notice. If these tutorials are no longer valid, please file a support ticket and we'll update them as soon as possible.

Back to Top
How Do I Embed a Google Map?

Step 1: Search for your address. If you want to include the company name, put that before the address.
Note: Adding the company name might not work as that address may not be associated with the name.

Step 2: Click the hamburger (three lines) icon from the left of the search bar.

Step 3: Click "Share and embed map".

Step 4: In the resulting popup, click "Embed Map".

Step 5: Copy the code.

Step 6: Open your website and log in (if necessary).

Step 7: Navigate to the page in question and add/edit any module with a rich-text editor.

Step 8: Open the HTML Viewer and paste in the code.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 9: Click "Update" on the HTML View and "Save" on the module.

Back to Top
How do I change the size of an embedded map from Google Maps?

Step 1: Follow the steps to add a Google Map to Step 4.

Step 2: Before copying the code, either pick a size from the dropdown, or select "Custom size" from the dropdown and type in your size. You can preview the size by clicking "Preview actual size".

Step 3: Continue following the steps to add a Google Map from from Step 5.

Back to Top
How do I make a Google Map appear to the left or right of my text?

Step 1: Follow the steps to add a Google Map.

Step 2: Open the HTML Viewer and find the code with the map. It will begin with iframe

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 3: Find the style attribute, it should look like style="border:0".

Step 4: Type/copy and paste phrases after the border:0 and within the quotes.

  • Right: ; float: right; margin-left: 20px;
  • Left: ; float: left; margin-right: 20px;

Remember the semi-colon. It needs to go after the 0.

Step 4: Click "Update" on the HTML Viewer and "Save" on the module.

Back to Top
How Do I Embed/Customize a Bing Map?

Step 1: Search for your address. If you want to include the company name, put that before the address.
Note: Adding the company name might not work as that address may not be associated with the name.

Step 2: Click the "Share" link from the top-right.

Step 3: Click the "Customize and preview" button.

Step 4: Select the desired settings.

Step 5: Click "Generate code" and copy the code from the resulting popup.

Step 6: Open your website and log in (if necessary).

Step 7: Navigate to the page in question and add/edit any module with a rich-text editor.

Step 8: Open the HTML Viewer and paste in the code.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 9: Click "Update" on the HTML View and "Save" on the module.

Back to Top
How do I make a Bing Map appear to the left or right of my text?

Step 1: Open the HTML Viewer and find the code with the map. It will begin with div.

Edit HTML source is the first button from the right on the bottom row of the editor.

Step 2: Find the width of the map. It will look something like with="XXX".

Step 3: Type/copy and paste the "style" phrases before the end if the top div. Width will be whatever the width of the map is. Don't forget "px" at the end of the number.

  • Right: style="width="XXXpx; float: right; margin-left: 20px;"
  • Left: style="width="XXXpx; float: left; margin-right: 20px;"

Step 4: Click "Update" on the HTML Viewer and "Save" on the module.

Back to Top