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>