Learn the benefits of adding Land id™ maps to your website and access how-to guides for embedding maps.
How to embed maps on your website
How to add iframes to your website
How to adjust the appearance of iframes on your website
Available with any of the following subscriptions:
- Land id™ Pro
- Land id™ Pro Unlimited
Definition
A Land id™ Shared Map can be embedded onto another webpage via an HTML iframe. This iframe will display the Land id™ map on the designated webpage.
A user who visits this webpage will see the embedded map and can click to view the full-screen version. You can experience how embedded maps work by looking at individual maps in our Gallery.
Related: Sharing Land id™ maps
Key benefits
- Help viewers to your website gain a better spatial understanding of a property with clearly marked infrastructure and amenities, embedded photos and more
- Provide a viewer's real-time location on a map when using the mobile app
Limitation: Currently, you need to use Land id™ on the desktop to get the embed code/URL required to add a Land id™ map to a webpage.
How to embed maps on your website
There are a few steps to embedding maps on your website:
Determine if you need embed code or URL
Embedding a Land id™ map on a website requires iframes. Each Land id™ map has an embed code and URL that work differently based on how your website supports iframes for maps.
Choose the embed code or URL based on how your website supports adding maps:
- If your content management system or platform has a designated field for adding a map, you may only need the embed URL for the iframe, instead of the embed code that provides the complete iframe code. Then, you will paste the embed URL into the appropriate field in your platform.
Learn how to copy the embed URL for a Land id™ map.
- If your website doesn't have a content management system, you may need to add the complete iframe code for the embed map directly to its source code. To do this, you will copy the embed code (with the complete iframe code) and paste it directly into your website's HTML code.
Learn how to copy the embed code for a Land id™ map.
Get embed URL for a Land id™ map (desktop)
Get embed code for a Land id™ map (desktop)
How to add an iframe to your website
Embedding Land id™ maps on a webpage requires iframes.
An iframe acts like a window because it displays content from a different website--like a video or ad--on a webpage. In this case, you will use an iframe to display your Land id™ map on a webpage. For a general introduction to iframes, watch this video tutorial.
Learn how to:
Add iframes in a WordPress post or page
Note: WordPress is a highly customizable platform that can lead to unique content editing flows and features. These tutorials assume you are familiar with your specific WordPress admin and site structure.
If you are new to WordPress, start with a tutorial like this, and come back when you're familiar with the WordPress admin and your site structure.
Here are three different approaches to embedding a Land id™ map in your WordPress site:
Recommended: Use a Custom HTML Block in WordPress
Back to top
Use an iframe plugin and a shortcode in WordPress
Using Custom Fields in WordPress
Sometimes, a WordPress website may be configured to use custom fields and visual page editors heavily. While we don’t know how your WordPress admin works, you may only need specific attributes from the iframe code to paste into your WordPress admin (most likely the src attribute, similar to the shortcode example above).
If your system does not meet these guidelines, your website's developer should provide the specific details you need from the iframe embed.
Back to top
Add iframes using HTML
Note: The following guide assumes that you understand HTML, HTML elements and their attributes, and general web development principles.
If you need help with any of these items, it is best to contact your website's developer to embed your map.
This may be a helpful tutorial if you need help getting started with the basics.
Follow these steps to add an iframe directly to your website's source code:
1. If you don't already have a page to embed your iframe, you must create a test page first. Create a blank file in a text editor of your choosing and save it as index.html in your chosen location.
Open your new index.html file in your web browser. You're now ready to add your iframe embed.
2. Paste this content below into your index.html. Save the file and refresh your browser.
<!DOCTYPE html>\ <html>\ <body>\ <h1>Agricultural Property Appraisal Report</h1>\ <iframe src="https://id.land/maps/3f108b9ec24f179989a2f4d621c6e5a0/embed">\ </iframe>\ </body>\ </html>
3. For the next step, you'll need the iframe embed code from the Land id™ map you want to embed. If you need help finding the embed code, refer to the "Get embed code for a Land id™ map" tutorial.
4. Replace the src="" attribute from the step before with the src attribute from your map's iframe embed code.
5. Adjust iframe attributes.
While iframes have many HTML attributes, those listed below are some of the most important in setting the embedded content in your iframe and controlling how the iframe displays on your page.
-
-
width: Set the width of the iframe
-
height: Set the height of the iframe
-
name: We can set the name of the iframe so that we can use it in JavaScript.
-
loading: Define how an iFrame loads. Choose from ‘lazy’, ‘eager’ or ‘auto’. For example, when ‘lazy’ value is used, the iFrame loads when the user scrolls down the page to the iFrame. This has the effect of improving the page load speed. ‘Eager’ loads it right away, whilst ‘auto’ lets the browser decide when to load the iFrame.
-
class: Add a CSS class name to the iframe for use in adding visual styles.
-
A complete example including the above attributes might look something like this:
<iframe name="Agricultural Property Appraisal Report" src="https://id.land/maps/3f108b9ec24f179989a2f4d621c6e5a0/embed"loading="lazy"width="480"height="320"class="land-id-map-embed"></iframe>
6. Your iframe should be visible on your page or post now. From here, you can adjust some of its visual display. If your site already has applicable CSS styles for iframes, you can publish your new iframe content.
Adjusting the appearance of iframes on your website
Today, most websites can be accessed on mobile and desktop devices alike. CSS needs to be used to add responsive styles to our iframe so that it displays correctly across various devices.
To achieve the best results, we recommend setting the iframe to the entire width of the content on your website and a minimum of 600 pixels in height:
.land-id-map-embed { width: 100%; height: 600px; border none;}
There are many ways to style the iframe to match the look and feel of your website. Your website’s code may have CSS styling that applies to all iframe elements on the page. This basic approach can be used to add the iframe to your page and can be adjusted and built upon to suit your specific needs.
Tip: If you're having trouble embedding Land id™ maps on your website, contact Support. While we don't know the nuances of every website platform, we will do our best to help you.