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!

View Map

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.

<div class="buttons">
<div id="tv" class="gmapbutton">View Map</div>
</div>
<div id="gmap-container">
<div class="modal-background">
<div class="modal">
<div class="iframe-container"><iframe id="gmap" ></iframe>
</div>
</div>
<div id="close">[close]
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.gmapbutton').click(function(){
$('#gmap-container').removeClass('out');
$('#gmap-container').removeClass('tv');
$('#gmap-container').addClass('tv');
$('body').addClass('modal-active');
document.getElementById("gmap").src="https://maps.google.com/maps?q=Mont-Joli%20station%2063%20Avenue%20de%20la%20Gare%2C%20Mont-Joli%2C%20QC%20G5H%201N7&t=&z=13&ie=UTF8&iwloc=&output=embed";
});

$('#close').click(function(){
$('#gmap-container').addClass('out');
$('body').removeClass('modal-active');
});
});
});
</script>
<style>

  html.modal-active, body.modal-active {
   overflow: hidden;
   }
   .iframe-container {
   height: 74vh;
   width: 90vw;
   position: relative;
   }
   .iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   }
   #gmap-container {
   position: fixed;
   display: table;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
   z-index: 1000;
   }
   #close{
   color: white;
   position: fixed;
   left: 70vw;
   top: 3vh;
   font-size: 34px;
   cursor: pointer;
   }
   @media (min-width:767px){
   #close{
   left: 84vw;
   }
   }
   #gmap-container.tv {
   -webkit-transform: scaleY(0.01) scaleX(0);
       -ms-transform: scaleY(0.01) scaleX(0);
           transform: scaleY(0.01) scaleX(0);
   -webkit-animation: unfoldIn 0.84s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: unfoldIn 0.84s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container.tv .modal-background .modal {
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
   -webkit-animation: zoomeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: zoomeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container.tv.out {
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
           transform: scale(1);
   -webkit-animation: unfoldOut 0.84s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: unfoldOut 0.84s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container.tv.out .modal-background .modal {
   -webkit-animation: zoomeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: zoomeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container .modal-background {
   display: table-cell;
   background: rgba(0, 0, 0, .8);
   text-align: center;
   vertical-align: middle;
   }
   .modal {
   background: white;
   display: inline-block;
   border-radius: 3px;
   position: relative;
   overflow-x:hidden;
   }
   .buttons {
   max-width: 800px;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   }
   .gmapbutton {
   display: inline-block;
   text-align: center;
   padding: 10px 15px;
   margin: 10px;
   background: red;
   font-size: 18px;
   background-color: #efefef;
   border-radius: 3px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
           box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
   cursor: pointer;
   }
   .gmapbutton:hover {
   color: white;
   background: #009bd5;
   }
   @-webkit-keyframes unfoldIn {
   0% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   }
   @keyframes unfoldIn {
   0% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   }
   @-webkit-keyframes unfoldOut {
   0% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   }
   @keyframes unfoldOut {
   0% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   }
   @-webkit-keyframes zoomeIn {
   0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   }
   @keyframes zoomeIn {
   0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   }
   @-webkit-keyframes zoomeOut {
   0% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   100% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   }
   @keyframes zoomeOut {
   0% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   100% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   }
</style>

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.

See How to Get The Link

Finally, simply replace the SRC in the code with yours

jQuery(function($){
$('.gmapbutton').click(function(){
$('#gmap-container').removeClass('out');
$('#gmap-container').removeClass('tv');
$('#gmap-container').addClass('tv');
$('body').addClass('modal-active');
document.getElementById("gmap").src= "INSERT YOUR SRC URL HERE!";
});

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


<div id="gmap-container">
<div class="modal-background">
<div class="modal">
<div class="iframe-container"><iframe id="gmap" ></iframe>
</div>
</div>
<div id="close">[close]
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('#gmapimage').click(function(){
$('#gmap-container').removeClass('out');
$('#gmap-container').removeClass('tv');
$('#gmap-container').addClass('tv');
$('body').addClass('modal-active');
document.getElementById("gmap").src="https://maps.google.com/maps?q=Mont-Joli%20station%2063%20Avenue%20de%20la%20Gare%2C%20Mont-Joli%2C%20QC%20G5H%201N7&t=&z=13&ie=UTF8&iwloc=&output=embed";
});

$('#close').click(function(){
$('#gmap-container').addClass('out');
$('body').removeClass('modal-active');
});
});
});
</script>
<style>

#gmapimage{
cursor: pointer;
}

html.modal-active, body.modal-active {
overflow: hidden;
}
.iframe-container {
height: 74vh;
width: 90vw;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#gmap-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
z-index: 1000;
}
#close{
color: white;
position: fixed;
left: 70vw;
top: 3vh;
font-size: 34px;
cursor: pointer;
}
@media (min-width:767px){
#close{
left: 84vw;
}
}
#gmap-container.tv {
-webkit-transform: scaleY(0.01) scaleX(0);
-ms-transform: scaleY(0.01) scaleX(0);
transform: scaleY(0.01) scaleX(0);
-webkit-animation: unfoldIn 0.84s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
animation: unfoldIn 0.84s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
   #gmap-container.tv .modal-background .modal {
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
   -webkit-animation: zoomeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: zoomeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container.tv.out {
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
           transform: scale(1);
   -webkit-animation: unfoldOut 0.84s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: unfoldOut 0.84s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container.tv.out .modal-background .modal {
   -webkit-animation: zoomeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
           animation: zoomeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
   }
   #gmap-container .modal-background {
   display: table-cell;
   background: rgba(0, 0, 0, .8);
   text-align: center;
   vertical-align: middle;
   }
   .modal {
   background: white;
   display: inline-block;
   border-radius: 3px;
   position: relative;
   overflow-x:hidden;
   }
   .buttons {
   max-width: 800px;
   margin: 0 auto;
   padding: 0;
   text-align: center;
   }
   .gmapbutton {
   display: inline-block;
   text-align: center;
   padding: 10px 15px;
   margin: 10px;
   background: red;
   font-size: 18px;
   background-color: #efefef;
   border-radius: 3px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
           box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
   cursor: pointer;
   }
   .gmapbutton:hover {
   color: white;
   background: #009bd5;
   }
   @-webkit-keyframes unfoldIn {
   0% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   }
   @keyframes unfoldIn {
   0% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   }
   @-webkit-keyframes unfoldOut {
   0% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   }
   @keyframes unfoldOut {
   0% {
   -webkit-transform: scaleY(1) scaleX(1);
           transform: scaleY(1) scaleX(1);
   }
   50% {
   -webkit-transform: scaleY(0.005) scaleX(1);
           transform: scaleY(0.005) scaleX(1);
   }
   100% {
   -webkit-transform: scaleY(0.005) scaleX(0);
           transform: scaleY(0.005) scaleX(0);
   }
   }
   @-webkit-keyframes zoomeIn {
   0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   }
   @keyframes zoomeIn {
   0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   }
   @-webkit-keyframes zoomeOut {
   0% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   100% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   }
   @keyframes zoomeOut {
   0% {
   -webkit-transform: scale(1);
           transform: scale(1);
   }
   100% {
   -webkit-transform: scale(0);
           transform: scale(0);
   }
   }

</style>

Unfolding

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!

Tagged Other

Create a Lazy-Loaded Elementor Google Maps Pop-Up Button

To begin with, insert an HTML element where you want the button

Then, go to the website below and get the SRC for your Google Map

Finally, simply replace the SRC in the code with yours

That's it! Now you can adjust the CSS to get the look you want

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

Chinese noodles

$9.99

Et voila! Thanks for reading!

Elementor Lazy Loaded Google Maps Button Template

Leave a Reply Cancel reply

Popular Designs

Super Easy Elementor Text Carousel

Create an Elementor Preloader - No Plugins Needed

Elementor Full Screen Split Navigation Made Easy!

Navigation

Quick links

Social