This method does not require installing additional plugins and allows you to precisely control the zoom level on different devices.
How it works: You add a small script that detects the screen width and, after the map has loaded, programmatically changes its scale using the setZoom() method.
How to do it:
- Set up the map in Elementor as usual, setting the base zoom level (for example, for desktop).
- Add an HTML widget with custom code to the same page (you can place it anywhere, for instance, in the footer).
- Insert the following code into the HTML widget:
JavaScript
<script>
document.addEventListener('DOMContentLoaded',function(){
function setResponsiveMapZoom(){
const iframes=document.querySelectorAll('iframe[src*="google.com/maps"]');
if(iframes.length===0)return;
let zoom=15;
if(window.innerWidth<768)zoom=12;
else if(window.innerWidth<1024)zoom=14;
iframes.forEach(function(iframe){
let src=iframe.src;
if(src.includes('z='))src=src.replace(/z=\d+/,'z='+zoom);
else src+=(src.includes('?')?'&':'?')+'z='+zoom;
iframe.src=src;
});
}
setResponsiveMapZoom();
});
</script>How to Adjust Zoom for Desktop and Mobile
In the script above, change these values to control zoom on different devices:
- Default zoom (e.g., for desktop):
let zoom = 15;
Set your preferred zoom level for large screens here.
- Mobile zoom (screens < 768px):
if (window.innerWidth < 768) zoom = 12;
Change 12 to the zoom level you want on phones.
- Tablet zoom (screens < 1024px):
else if (window.innerWidth < 1024) zoom = 14;
Change 14 to the zoom level you want on tablets.
You can adjust the breakpoints (768, 1024) and zoom values (15, 12, 14) to match your design.