Create a Lazy-Loaded Elementor Google Maps Pop-Up Button
Avoid the slow down from the normal Maps Element. This map ONLY loads when and if the users click the button!
To begin with, insert an HTML element where you want the button
Add all of the following code in that html element. This will be the google map button.
<script> /* Please login to get the code * The code will be for the Create a Lazy-Loaded Elementor Google Maps Pop-Up Button tutorial * Found at this URL https://element.how/lazy-loaded-elementor-google-maps/ */ </script>
You can also simply download the template directly from my Templates page.
Then, go to the website below and get the SRC for your Google Map
Find it here : embedgooglemap.net. ONLY get the SRC url. Click the button below to see the GIF that shows exactly how.
Finally, simply replace the SRC in the code with yours
<script> /* Please login to get the code * The code will be for the Create a Lazy-Loaded Elementor Google Maps Pop-Up Button tutorial * Found at this URL https://element.how/lazy-loaded-elementor-google-maps/ */ </script>
Note that this code is not to be added, it is already part of what you copied above. Just change the url.
That's it! Now you can adjust the CSS to get the look you want
Modify the HTML element you created. If you would like the button to look differently for example, modify the .gmapbutton CSS.
If you prefer using an image for the trigger instead of a button, simply add the CSS ID 'gmapimage' to your image, and use the code below instead
<script> /* Please login to get the code * The code will be for the Create a Lazy-Loaded Elementor Google Maps Pop-Up Button tutorial * Found at this URL https://element.how/lazy-loaded-elementor-google-maps/ */ </script>
Et voila! Thanks for reading!
Elementor Lazy Loaded Google Maps Button Template
This download gets you the following template :
Elementor Lazy Loaded Google Maps Button Template
Related tutorial : Elementor Lazy Loaded Google Maps Button
Thanks also to designcouch for the modal animations!