Anywhere Mobility Studio Documentation

Control sub type LiteralHTML example

Embed a map

Example

Embed Map Example

Setup

Embed Map Setup

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

Generate the base code from: https://www.bing.com/maps/embed-a-map

<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:

"<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; in the URL with &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:

"<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.