---
title: "LiteralHTML example - Embed a map"
slug: "bc-literalhtml-example-embed-map"
tags: ["Task"]
updated: 2026-06-25T09:59:03Z
published: 2026-06-25T09:59:03Z
canonical: "docs.staedean.com/bc-literalhtml-example-embed-map"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.staedean.com/llms.txt
> Use this file to discover all available pages before exploring further.

# LiteralHTML example - Embed a map

#### Example

![Embed Map Example](https://cdn.document360.io/da662430-6a41-47b1-8c7e-7e4ac37a9756/Images/Documentation/LiteralHtml_Map.png)

#### Setup

![Embed Map Setup](https://cdn.document360.io/da662430-6a41-47b1-8c7e-7e4ac37a9756/Images/Documentation/LiteralHtml_Map_setup.png)

The map requires some preparation because the example code cannot be copied directly from the generated code.

Generate the base code from [Azure Maps](https://azure.microsoft.com/en-us/products/azure-maps/).

```plaintext
<div>
    <iframe width='325' height='280' frameborder='0' src='https://www.bing.com/maps/embed?h=280&w=325&cp=52.3673008~-4.8998197&lvl=11&typ=s&sty=r&src=SHELL&FORM=MBEDV8' scrolling='no'>
    </iframe>
    <div style='white-space:nowrap;text-align:center;width:325px;padding:6px 0;'>
    <a id="largeMapLink" target="_blank" href='https://www.bing.com/maps?cp=52.3673008~-4.8998197&amp;sty=r&amp;lvl=11&amp;FORM=MBEDLD'>View Larger Map</a>
    </div>
</div>
```

Adapt this code to produce the following expression in the LiteralHTML control for the map:

```plaintext
"<iframe width='325' height='280' frameborder='0' src='https://www.bing.com/maps/embed?h=280&amp;w=325&amp;cp="+Field("source/parameter/LATITUDE")+"~"+Field("source/parameter/LONGITUDE")+"&amp;lvl="+Field("source/parameter/ZOOM")+"&amp;typ=s&amp;sty=r&amp;src=SHELL&amp;FORM=MBEDV8' scrolling='no'></iframe>"
```

The adaptations made:

- Removed the encapsulating HTML elements (divs)
- Replaced all double quotes with single quotes: otherwise the expression is invalid
- Replaced `&amp;amp;` in the URL with `&amp;amp;amp;` to send the control to the client correctly
- Incorporated parameters for the latitude, longitude, and zoom level

The link to view the larger map stores in the second LiteralHTML control:

```plaintext
"<a id='largeMapLink' target='_blank' href='https://www.bing.com/maps?cp="+Field("source/parameter/LATITUDE")+"~"+Field("source/parameter/LONGITUDE")+"&amp;sty=r&amp;lvl="+Field("source/parameter/ZOOM")+"&amp;FORM=MBEDLD'>View Larger Map</a>"
```

More details are in the download.

## Related

- [Control sub type - LiteralHTML](/bc-control-sub-type-literalhtml.md)