You can embed an interactive map on your web page, allowing your audience to visualize a specific location on the map. To do this you need to be familiar with HTML, and how to create CMS assets.
Using Google API you will embed an interactive map so users see a single location. Please only use this in the main content or sidebar region. Your finished map will look like this:
Here are the quick steps:
- Find and copy the iframe embed code from Google Maps
- Login to the CMS website to where you will add the map
- Create a source code asset
- Paste the iframe embed into the source code asset
- Tweak the code slightly (add
="false"afterallowfullscreen) - Publish the asset
- Insert the asset onto the page and location you wish the map to appear
- Enjoy the relaxing beverage of your choice.
Ready? Let's embed this map step-by-step.
1. Find and copy the iframe embed code from Google Maps
- In Google Maps, find the location you wish to the map to show (or the region, etc.) If you want a marking pin in a place, make sure that's there before you head to the next step.
- Click on the "Share" option
- In the pop-up box, click the "Embed map" tab
- Select "medium" (or whichever side you wish, I like medium best) and then copy the code that begins with
<iframe src="...
2. Login to the CMS website to where you will add the map
3. Create a source code asset
- In the top blue bar, hover over "Content" and select "Assets"
- Select the green "+New" button near the top-right and select "Source Code Asset"
- Create this like any other Asset:
- Give it a unique name which you'll recognize later
- Tick the "Lock to Site" box
- Set "Access Group" and "Available To" to your Site's name (e.g. Nursing_CON, if I'm working within Nursing's website.)
- Stay in this screen for 4 - 6, too.
4. Paste the iframe embed into the source code asset
- Paste that code (
<iframe src="...) you copied from Google Maps into the "Asset Content" field.
5. Tweak the code slightly
- Near the end, you'll see the word , and this just needs to "equal" something, or our CMS gets angry. You need to add
="false"afterallowfullscreenand it will run smoothly. It'll look like this:
An example Before:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1393.9766952000393!2d-110.996955!3d45.671836!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53454484ce19bfa7%3A0x6ec0d0257c0c0444!2s751+Osterman+Dr%2C+Bozeman%2C+MT+59715!5e0!3m2!1sen!2sus!4v1506631328785" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
And After:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1393.9766952000393!2d-110.996955!3d45.671836!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53454484ce19bfa7%3A0x6ec0d0257c0c0444!2s751+Osterman+Dr%2C+Bozeman%2C+MT+59715!5e0!3m2!1sen!2sus!4v1506631328785" width="600" height="450" frameborder="0" style="border:0" allowfullscreen="false"></iframe>
Protip: change the width value to "100%" so your map is mobile-friendly, like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1393.9766952000393!2d-110.996955!3d45.671836!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53454484ce19bfa7%3A0x6ec0d0257c0c0444!2s751+Osterman+Dr%2C+Bozeman%2C+MT+59715!5e0!3m2!1sen!2sus!4v1506631328785" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen="false"></iframe>
6. Publish the asset
- Hit the "Create" or "Save" button at the bottom of the screen if you haven't already.
- Select the green "Publish" button at the top, and go through the Publish dialogue and complete the publishing.
7. Insert the asset onto the page and location you wish the map to appear
- If you've never done this before, read this Asset Insertion primer.
- Publish the page.
8. Enjoy the relaxing beverage of your choice.
- I recommend a hot coffee via an Aeropress, but enjoy what you've got! You're done!