[How-To] Create embedded Google Map with Web Module

appyet

Support Team Member
Staff member
For more details Google Map: check out: https://support.google.com/maps/answer/144361?co=GENIE.Platform=Desktop&hl=en&oco=1

Step 1. Go to Google Map using your desktop web browser, and search for address you like to show in embedded Google Map. In this example, we search for "Banff National Park"
1.jpg
Step 2. Click on Share, then switch to Embedded tab, and copy the "<iframe... src=" HTML string

2.JPG

Step 3. Go to https://appyet.com, open your application, create a new Web Module (Type: Web Content), in "Content:" switch to Source, then paste below source code. THEN MAKE SURE change "<iframe src=" value to your "<iframe src" value from Step 2

Code:
<html>
<head>
    <title>Banff National Park</title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
    <style type="text/css">img {display:block; width: auto !important; height: auto !important; max-width: 100%; padding:0px !important; margin-left:0px !important; margin-right:0px !important; margin-top:0px !important; margin-bottom:0px !important}
    </style>
    <style type="text/css">body {
        margin: 0;
    }
    </style>
</head>
<body>
<p><iframe allowfullscreen="true" aria-hidden="false" frameborder="0" height="100%" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158982.9493965835!2d-116.0515900258183!3d51.49287484510345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5377662b8c929195%3A0xc09de268accad7e6!2sBanff%20National%20Park%20Of%20Canada!5e0!3m2!1sen!2sca!4v1589112683034!5m2!1sen!2sca" style="border:0;" tabindex="0" width="100%"></iframe></p>
</body>
</html>

3.JPG

Result:

Screenshot_20200510-090309.jpgScreenshot_20200510-090315.jpgScreenshot_20200510-090328.jpg
 
Last edited:
Top