Google Map is a web mapping service maintained by GOOGLE.  This can be used to announce the geographical location of your business to your clients while affording the customers expense of opening new browser tabs and following the numerous steps. This shortcut provides convenience.

Olitt provides an easy-to-install google map plugin to facilitate the integration. This plugin takes in an HTML container element id, src-URL, height and width [which are obtained from Google maps portal and on your website templete] to complete the installation.

Google provides a simple guide on how you can embed the google map to your website. This involves embedding a generated HTML code that you can add to your website. However, only a few parts [src url and map dimensions] are to be used with the plugin.

Below is a guide to follow. If you have the src url and dimensions feel free to skip to step 2.

Step 1: Obtain src url and map dimensions

Open the google maps. You can search for your location or a city near you from search input at the top left [on the desktop view].  Double click on the map to select your location on the map.

Open the navigation menu on the left and scroll down to “share or embed map” item and  click to open

From the new pop up window select “embed a map” tab from the top navigation.

You can select the size of the map you wish to display by selecting from the drop-down menu on the left.

Click on “COPY HTML” button on the left and paste the content on your preferred text editor.

Extract and copy the url and dimensions as shown below.

Step 2: Create an HTML container  element with id

 Open a new tab on your browser and log in to your Olitt account.

Once you log in to your account, select websites to enter “my websites” page. Hover the mouse cursor over the templates and select the edit template.

You can create the HTML div element or use already defined div element in your template. Scroll down and click on the section you wish to display the google map. Upon the context menu that pops up, click on the edit icon.

The id is the HTML tag attribute that uniquely identifies the element with the document/page. Add the id on the container element selected above.

Save the changes and return to “my website” page.

From the “my website” page, click the more (…) options and select plugins. 

From the list that appears, scroll down and locate “Google map Integration”.  Click on Expand.

Add the id element you created above, the src URL, height and width as shown below.

 You can replace the link and dimensions with yours.

Click on the “connect” button and now you should be able to see “connected” green text.

You can verify the integration by refreshing your website. If you completed the above steps successfully, you should be able to see the Your google map on a section where you added the container Id.