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(){
var buttonId = $(this).attr('id');
$('#gmap-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active'); document.getElementById("gmap").src="https://maps.google.com/maps?q=mont%20joli%201496&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;
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 {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 0.84s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#gmap-container.tv .modal-background .modal {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#gmap-container.tv.out {
transform: scale(1);
animation: unfoldOut 0.84s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#gmap-container.tv.out .modal-background .modal {
animation: zoomOut 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;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
cursor: pointer;
}
.gmapbutton:hover {
color: white;
background: #009bd5;
}
@keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
@keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
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.

Finally, simply replace the SRC in the code with yours

jQuery(document).ready(function( $ ) {
$('.gmapbutton').click(function(){
var buttonId = $(this).attr('id');
$('#gmap-container').removeAttr('class').addClass(buttonId);
$('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.

Test out your new google maps button on different devices and browsers

If it doesn't work right away, you might have to enqueue jQuery

How to enqueue jQuery
Unfolding

Et voila! Thanks for reading!

Thanks also to designcouch for the modal animations!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

x

Free Templates!

Subscribe to my news letter to receive the FREE template of this animated corner gift!

present

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *