@mapotic/mapotic-embed
v0.0.10
Published
It enables to place your Mapotic.com map on your websites.
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>