Before setting up the tool, you need to create an account on Google Tag Manager And link it to your Store, Click on the button below to learn how
Go to My Places - Google My Maps by using your Google account, then press on the button in the left
Click on Create new map
Search for your location and choose it from the options
Add your location by pressing on the + Sign
Press on the 3 dots and choose Rename this layer
Rename the layer, then Save
Click on Share
Name the map, then OK
Toggle on the 2 buttons, then close
Click on the 3 dots above, choose Embed on my website
Save the link you got
Visit tagmanager.google.com and click on New Tag
Click on Tag Configuration
Click on Custom HTML
Copy and paste the following code
<style>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #FEFEFE;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius:20px;
}
/* The Close Button */
.close {
color: #AAAAAA;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.findme-btn-wrap {
direction: ltr;
position: fixed;
left: auto;
top: auto;
right: 0%;
bottom: 0%;
z-index: 99;
font-family: "Cairo" !important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 60px;
margin-right: 20px;
margin-bottom: 16px;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 99px;
background-color: #B18147;
-webkit-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
box-shadow: -2px 2px 10px 0px rgba(0,0,0,0.2);
}
.findme-btn-wrap:hover {
cursor: pointer;
}
.findme-icon-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 50px;
height: 50px;
margin-right: 5px;
float: right;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 99px;
background-color: #895C26;
}
.findme-btn-txt {
margin-right: 20px;
float: right;
color: #fff;
font-size: 20px;
}
#myBtn{
z-index:101
}
</style>
<script type="text/javascript" id="" src="https://kit.fontawesome.com/f1bed78758.js"></script>
<!-- Trigger/Open The Modal -->
<div class="findme-btn-wrap" id="myBtn">
<div class="findme-icon-wrap">
<div>
<i class="fas fa-map-marker-alt" style="font-size: 22px; color: #fff;" aria-hidden="true"></i>
</div>
</div>
<div class="findme-btn-txt">
<div>أين تجدني؟</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div><iframe src="https://www.google.com/maps/d/u/0/embed?mid=1ti9mMYFsEaPCCpCsHL9QBjhHQTuWJ6KY&z=5" width="100%" height="480"></iframe></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// $(document).keyup(function(e) {
// if (e.keyCode == 27) {
// modal.style.display = "none";
// }
// });
document.onkeydown = function (e) {
switch (e.keyCode) {
case 27:
modal.style.display = "none";
break;
default:
return; // Do nothing for the rest
}
};
</script>Replace this part in the previous code with the code you got from Google my places
You can control the color of the widget as well by replacing the written color code with the colors codes you prefer to fit your website colors
Click on Triggering
Select All Pages and click Add
Rename the Tag Name and click Save
Click on Submit, Publish then Continue
Log in to your Wuilt account and preview your store outside
