How can I add a Google Map to my Pilera Community Website?

How can I add a Google Map to my Pilera Community Website?


Summary/Goal:

In this article we will cover how to add a Google map to your Pilera Easysite. You will be able to include specific locations on the map such as the location of your community or office.

Brief:

To embed a Google map into your Pilera Easysite you must access the ‘Share or embed map’ link and get the URL. From there you can add the embed URL into the Pilera Easysite ‘Content (Freeform HTML Blob)’ source code. When saved it will appear on the Pilera Easysite page. 

Step by step:
 
  1. ACCESS GOOGLE MAPS by going to the Google homepage and clicking on the small grid icon in the upper right corner. This will create a pop-up window where you can select the Google maps icon. If you do not see the maps icon you can find more applications in the link at the bottom of the pop-up.


     
  2. ADD THE DESIRED ADDRESS in the text field on the upper right corner. This would most commonly be the location of your community or office building. (Note: You can add directions between two set locations, review the Tips section for more information.)
     
  3. ACCESS THE NAV by click on the navigation icon in the upper left corner of google maps.


     
  4. SELECT THE ‘SHARE OR EMBED MAP’ link within the navigation window.


     
  5. CLICK THE ‘EMBED MAP’ TAB on the upper section of the pop-up window. It will take you to a representation of the map (1). You can alter the size of the map to best fit your website (2). We recommend a map size no bigger than 450 pixels. 


     
  6. COPY THE EMBED URL to your clipboard and save it to paste into Pilera later. (3).


  7. ACCESS YOUR PILERA EASYSITE under an admin or website admin login. You can access the Pilera Easysite by going to your web portal. Then access your community website (2) through the manage (1) tab.


     
  8. ACCESS ADMIN MODE by mousing over the ‘Admin Control Panel’ and clicking ‘Admin Mode’ (NOTE: If you do not see the ‘Admin Control Panel’ you may not be logged into an admin account.) (NOTE: If you see ‘Preview Mode’ instead of ‘Admin Mode’ then you are already in ‘Admin Mode’)


     
  9. ADD A NEW MODULE. In admin mode you will notice slight interface changes such as a small x (delete module), a pencil (edit module), and a plus sign (Add new module). To add a new module, click on the plus sign.


     
  10. USE THE CONTENT FREEFORM MODULE. A pop-up window will appear labeled ‘Select a Module to add to Column #’. Click on the ‘Content (Freeform HTML Blob)’ module.


     
  11. ADD THE URL IN THE SOURCE CODE. In the ‘Content (Freeform HTML Blob)’ click on the Source button in the top left (1). This will allow you to alter the HTML source code. Paste the embed URL code from Google map into the white text field (2).


     
  12. SAVE. Be sure to save your changes by clicking on the save floppy disk icon next to the source button.
     
  13. REVIEW. Once saved the map should appear. We recommend following the testing procedures below to make sure it works as intended. If you want some helpful tips on how to make adjustments to your calendar review the tips sections below.



Testing:
 
  1. Sign out of all Google accounts and view the Pilera Easysite page. The map should still be viewable.
     
  2. If you see the URL but no calendar, then you copied it into the ‘Content (Freeform HTML Blob)’ module and not in the source code section. Please review step 10 again.
     
  3. If you copied the URL in the source code but are still seeing only the URL. You most likely did not copy the complete URL. You may have only partially copied the URL. Go back and copy the embeddable URL again and paste it in the source code. Review step 5 again. 

     
Tips:
 
  1. You can add directions from one location to another in Google Maps. This can be useful for events that take place in two separate locations. Click on the directions button and type in the secondary action. Continue through the steps starting at step 3.

     
  2. If you are using a Pilera online form and you need the resident to drop off specific documents. Add the Google map to the form as well with directions from the community to your office. The steps are very similar. 

Conclusion:

Google calendars are in many websites. They are used to show the location of businesses, give directions between two points, and build credibility. They are very easy to add to your Pilera Easysite and the dynamic nature of them means they fit the user’s needs. 
 

    • Related Articles

    • Adding a google calendar on my Pilera community website

      Summary/Goal: In this article we will cover from start to finish how to add your Google calendar into the Pilera Easysite. This includes making the calendar public, grabbing the embeddable URL and inserting it into the source code.  Brief: To embed a ...
    • How do I add a Banner and Logo to my Community Website (new responsive websites)

      Summary/Goal Your community or company logo and the banner is a significant aspect of your branding and the values it stands for.  The intent of this article is to outline the steps to add your logo and banner to the website.   Steps: Navigate to the ...
    • How do I create or change the color scheme on my community website?

      Summary/Goal: Having a color scheme is important to your community or company's branding.  This article shows you how to add colors to your website. Steps: In the Admin Control area, click on "Change Site Look".  This is where you will set the colors ...
    • How do I add Content Blocks to my website?

      Summary/Goals: Content cards are three-columned content blocks consisting of images, text, and buttons that when combined help your residents to find relevant information on your website quickly.  They not only enhance the user experience for your ...
    • How do I add my document library documents into my Community Website?

      How do I add documents from Document Library to the Community Website? Last Updated: Jun 10, 2019 05:15PM EDT Summary/Goal: To add documents from the document library (newer version released in 2018) to the community website.  This article will also ...