Back to elements

Preparing your page

• Include Leaflet CSS & JavaScript file in your document aftter that Put a div element with a certain id where you want your map to be:

<!-- Leaf Map css -->
<link rel="stylesheet" type="text/css" href="assets/css/vendors/leaflet-map.css" />

<!-- Leaf Map js -->
<script src="assets/js/leaflet-map.js"></script>
<script src="assets/js/leaflet-map-custom.js"></script>

<div id="map"></div>

• Make sure the map container has a defined height, for example by setting it in CSS:

#map{ height: 180px; }

• Visit Full Documentation

Preparing your page

• Include below iframe and give it height and width.

<iframe class="map-iframe"
src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=Malet%20St,%20London%20WC1E%207HU,%20United%20Kingdom+(Your%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
></iframe>

Preparing your page

• Include below iframe and give it height and width.

<iframe class="map-iframe"
 src="https://www.bing.com/maps/embed?h=245&w=766&cp=51.94946643539271~-0.9383425026094301&lvl=9&typ=d&sty=r&src=SHELL&FORM=MBEDV8"> 
 </iframe>