Honeycomb MapsHow To: Embed a Map on Your Website
This guide will show you how to embed a Honeycomb map directly on your website. Honeycomb Maps offers embedding at no cost.
Prerequisites
- A public Honeycomb map (see Create a Public Map)
- Access to your website's HTML code
Step-by-Step Guide
1. Generate Embed Code
Open your publicly-shared map in Honeycomb Map and open the 'Save/Share Map' pane in the Edit Map sidebar.
You will see two new pieces of text that can be copied: a link to the public map, and a piece of code that can be used to embed the map.
Click on the 'Copy' button in the 'Embed code for websites' box to copy a link to the map.
2. Add to Your Website
The copied piece of code is an HTML element that defines an iframe. You can learn more about what iframes are and how to customize them on the W3Schools website here.
You will need to insert this piece of code into your website. Depending on how your website is designed, the place you paste this code may vary.
Below is a Honeycomb Map embedded into this webpage, using the following code:
<iframe src="https://app.honeycombmaps.com/maps/shared/1qNdMguhhNo2Anb-DB0Al13mG75YHDxmy?provider=gdrive" width="100%" height="600" frameborder="0" allowfullscreen title="Honeycomb Map"></iframe><iframe src="https://app.honeycombmaps.com/maps/shared/1qNdMguhhNo2Anb-DB0Al13mG75YHDxmy?provider=gdrive" width="100%" height="600" frameborder="0" allowfullscreen title="Honeycomb Map"></iframe>3. Configure Display Options
You can customize the height and width attributes of the iframe to make sure that all of the components on your map fit. You may also want to adjust the starting view within Honeycomb (you can do this in the 'Settings' pane).
Congratulations, you now have an embedded map on your website! Whenever you make a change to the underlying Honeycomb Maps file and click save, this change will be instantly reflected on the saved map. In addition, if the data in any of your data sources changes, this will also be reflected on the map immediately.
4. Remove Honeycomb Maps branding
Many companies that share proprietary data want to customize the map to match their brand and replace the Honeycomb Maps logo with their own. This is something that we offer as part of our Enterprise plan. If you are interested in this, please reach out to us at hello@honeycombmaps.com.