@mapotic/mapotic-embed
v0.0.10
Published
It enables to place your Mapotic.com map on your websites.
Downloads
4
Readme
Mapotic Embed
It enables to place your Mapotic.com map on your websites.
Usage
Below are some of the most common ways to include Mapotic Embed.
Using Html Element - declarative way
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How use mapotic embed</title>
<script
src="https://cdn.jsdelivr.net/npm/@mapotic/[email protected]/dist/mapotic-map-es2015.js"
type="module"
></script>
<script
src="https://cdn.jsdelivr.net/npm/@mapotic/[email protected]/dist/mapotic-map-es5.js"
nomodule
defer
></script>
</head>
<body>
<mapotic-embed-map
mapid="3922"
lat="50.0850607"
lng="14.4272246"
zoom="17"
custommarkerclickevent="true"
style="width: 500px; height: 500px;"
>
</mapotic-embed-map>
<script>
let elem = document.querySelector('mapotic-embed-map');
elem.addEventListener(
'onmarkerclick',
function (e) {
console.log('onmarkerclick', e);
return;
},
false
);
</script>
</body>
</html>Using document.createElement - imperative way
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How use mapotic embed</title>
<script
src="https://cdn.jsdelivr.net/npm/@mapotic/[email protected]/dist/mapotic-map-es2015.js"
type="module"
></script>
<script
src="https://cdn.jsdelivr.net/npm/@mapotic/[email protected]/dist/mapotic-map-es5.js"
nomodule
defer
></script>
</head>
<body>
<div id="mapotic-embed-map-container" style="position: relative; width: 100%; height: 400px;"></div>
<script>
var mapElem = document.createElement('mapotic-embed-map');
mapElem.setAttribute('mapid', '3922');
mapElem.setAttribute('lat', '49.8602445');
mapElem.setAttribute('lng', '13.7726288');
mapElem.setAttribute('zoom', '16');
mapElem.setAttribute('custommarkerclickevent', 'true');
mapElem.setAttribute('style', 'width: 100%; height: 400px; display: block;');
mapElem.addEventListener(
'onmarkerclick',
function (e) {
console.log('onmarkerclick', e);
return;
},
false
);
var mapContainer = document.querySelector('#mapotic-embed-map-container');
mapContainer.appendChild(mapElem);
</script>
</body>
</html>