How to embed Google Maps and Google Calendar in your Appmaker App

Appmaker
5 min readJun 27, 2023

--

In today’s digital age, utilizing platforms such as Google Maps and Google Calendar can provide your audience with valuable context and information. This article will walk you through the process of sharing Google Maps location and Google Calendar events on your Appmaker App. We’ve broken down the process into clear, simple steps to ensure that even those with minimal technical skills can accomplish this task with ease.

Google Maps

  1. Open Google Maps and select the location you want to share with your audience. Google Maps විවෘත කර ඔබට ඔබේ users සමඟ බෙදා ගැනීමට අවශ්‍ය ස්ථානය තෝරන්න.
  2. Select the share option. “Share” විකල්පය තෝරන්න.

3. Then select the embed tab. You can choose which size the embedded map would appear. Once you have made your selection click on “Copy HTML”. ඉන්පසු embed ටැබ් එක තෝරන්න. ඔබට embed සිතියම දිස්වන ප්‍රමාණය තෝරාගත හැක. ඔබ තෝරා ගත් පසු “Copy HTML” මත ක්ලික් කරන්න.

4. Go to Appmaker and create a new page and navigate to the Text Editor Section. Appmaker වෙත ගොස් නව පිටුවක් සාදා Text Editor කොටස වෙත යන්න.

5. Select HTML editor option. HTML සංස්කාරක විකල්පය තෝරන්න.

6. Now paste the embed code you copied in the HTML box and publish the page. දැන් ඔබ කොපි කරගත් embed code එක HTML box එකේ paste කර page එක publish කරන්න.

7. The map will be shown as given below. පහත දැක්වෙන පරිදි සිතියම පෙන්වනු ඇත.

8. If you want to embed directions to and from a place on Google Maps, you can do this as well. To do this clicks on the “directions” icon. ඔබට Google Maps හි ස්ථානයකට සහ ඉන් පිටතට දිශාවන් කාවැද්දීමට අවශ්‍ය නම්, ඔබට මෙයද කළ හැක. මෙය සිදු කිරීම සඳහා, “directions” අයිකනය මත ක්ලික් කරන්න.

9. Enter the destinations that you want directions to be shown for. You can add multiple destinations by clicking on the “Add Destination” button. ඔබට දිශාව පෙන්වීමට අවශ්‍ය ගමනාන්ත ඇතුළත් කරන්න. “Add Destination” බොත්තම ක්ලික් කිරීමෙන් ඔබට ගමනාන්ත කිහිපයක් එක් කළ හැක.

10. Once you have finalised your stops, click on the “Details” link for your preferred route. ඔබ ඔබේ නැවතුම් අවසන් කළ පසු, ඔබ කැමති මාර්ගය සඳහා “Details” සබැඳිය ක්ලික් කරන්න.

11. Click on the “Share” icon. “Share” අයිකනය මත ක්ලික් කරන්න.

12. Select the embed map option and copy the HTML code. Then follow steps 4 to 6. Embed map විකල්පය තෝරා HTML කේතය පිටපත් කරන්න. ඉන්පසු පියවර 4 සිට 6 දක්වා අනුගමනය කරන්න.

13. Your map will be shown as given below. පහත දක්වා ඇති පරිදි ඔබගේ සිතියම පෙන්වනු ඇත.

Google Calendar

  1. Go to Google calendar and choose the calendar you want to share. Then click on the “Options” icon in front of the calendar as shown below. Google calendar වෙත ගොස් ඔබට බෙදා ගැනීමට අවශ්‍ය දින දර්ශනය තෝරන්න. ඉන්පසු පහත රූපයේ පරිදි කැලැන්ඩරය ඉදිරියෙන් ඇති “Options” අයිකනය මත ක්ලික් කරන්න.

2. Select the “Settings and Sharing” option. “Settings and Sharing” විකල්පය තෝරන්න.

3. Click on “Access Permission for Events”. “Access Permission for Events” මත ක්ලික් කරන්න.

4. Make the Calendar available to everybody by ticking the box titled “Make available to public”. Then choose from the drop down whether you want to show only free/busy or show the complete event details. “Make available to public” යන කොටුව සලකුණු කිරීමෙන් දින දර්ශනය සැමට ලබා ගත හැකි බවට පත් කරන්න. ඉන්පසු ඔබට නොමිලේ/කාර්යබහුල බව පෙන්වීමට අවශ්‍යද නැතහොත් සම්පූර්ණ සිදුවීම් විස්තර පෙන්වීමට අවශ්‍යද යන්න පතනයෙන් තෝරන්න.

5. Next click on the menu titled “Integrate Calendar”. මීළඟට “Integrate Calendar” යන මෙනුව මත ක්ලික් කරන්න.

6. Copy the embed code. කාවැද්දූ කේතය පිටපත් කරන්න.

7. Go to Appmaker and create a new page and navigate to the Text Editor Section. Appmaker වෙත ගොස් නව පිටුවක් සාදා Text Editor කොටස වෙත යන්න.

8. Select HTML editor option. HTML සංස්කාරක විකල්පය තෝරන්න.

9. Now paste the embed code you copied in the HTML box and publish the page. දැන් ඔබ කොපි කරගත් embed code එක HTML box එකේ paste කර page එක publish කරන්න.

10. The calendar will be shown as given below. පහත දැක්වෙන පරිදි දින දර්ශනය පෙන්වනු ඇත.

We’ve come to the end of our guide on how to embed Google Maps and Google Calendar into your Appmaker App. By following these steps, you’ve added dynamic, informative elements to your website that will undoubtedly enrich your audience’s user experience. Keep exploring and leveraging these tools to their fullest potential, and you’ll be sure to see the positive impacts on your website’s engagement and usability.

--

--

Appmaker

Appmaker is a code less App creation platform. We offer a range of powerful app templates that you can easily customise to bring your app idea to life.