TrackAsiaTrackAsia GL JS DocsExamplesGenerate embed TrackAsia map

Generate embed TrackAsia map

Generate iframe TrackAsia map that can embedded on the website.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generate embed TrackAsia map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#coordinates {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
bottom: 10px;
left: 10px;
padding: 5px 10px;
margin: 0;
font-size: 11px;
line-height: 16px;
border-radius: 3px;
}
</style>
<div id="map"></div>
<div id="coordinates">
<div id="iframeCode">
<h2>Iframe code:</h2>
<textarea id="iframeTextarea" rows="4" cols="30" readonly></textarea
><br />
<button onclick="generateIframeCode()">Generate</button>
<button onclick="copyIframeCode()">Copy</button>
</div>
</div>
<script>
var map = new trackasiagl.Map({
container: 'map',
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
center: {"lat":10.762622,"lng":106.660172},
zoom: 6
});
var marker = new trackasiagl.Marker({ draggable: true })
.setLngLat({"lat":10.762622,"lng":106.660172})
.addTo(map);
map.on('click', function (e) {
marker.setLngLat(e.lngLat);
});
function generateIframeCode() {
const zoom = map.getZoom();
const lat = marker.getLngLat().lat;
const lng = marker.getLngLat().lng;
if (lat && lng && zoom) {
const iframeCode = `<iframe width="70%" height="60%" style="border:none;" src="https://maps.track-asia.com/embed/?lat=${lat}&lng=${lng}&zoom=${zoom}"></iframe>`;
document.getElementById('iframeTextarea').value = iframeCode;
}
}
function copyIframeCode() {
const iframeTextarea = document.getElementById('iframeTextarea');
iframeTextarea.select();
document.execCommand('copy');
navigator.clipboard.writeText(iframeTextarea.value);
alert('Copied successfully!');
}
</script>
</body>
</html>