[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:

Pink

New Member
Very interesting, but in my opinion accuracy is very important in creating maps and I would not try to do it myself even with detailed instructions. Here you need a professional approach of such specialists as mappitall.com They can either convert an outdated paper map into a digital model or digitize satellite images. And most importantly, all this with an individual approach. Why not use their services to be sure of the quality and accuracy.
 
Last edited:
Top