Before You Begin
To display a Google Map on your site, you will need a dedicated map block set up by the Web Ninja team. If you are unsure whether this has been configured for your site, or if you do not yet have a map block available, please contact us before proceeding:
Once your block is ready, you can follow the steps below.
Step 1 — Get the Embed Code from Google Maps
Open Google Chrome and go to maps.google.com.
Search for your business location. For best results, begin your search with the business name followed by the address (e.g. Acme Plumbing, 123 Main Street, Sydney NSW). Including the business name ensures it appears as a label on the embedded map.
Once your location appears on the map, click the Share icon in the location panel on the left-hand side
In the Share dialog, select Embed a map.
Click Copy HTML to copy the embed code to your clipboard.
Note: You can select a map size from the drop-down before copying if you have a preferred dimension in mind, but this can also be adjusted later inside Web Ninja.
Step 2 — Add the Embed Code in Web Ninja
Log in to the Web Ninja admin area.
Navigate to Content → Blocks in the main menu.
Select the block designated for your Google Map.
At the top of the block editor, click View and select Source Code from the drop-down. You must paste the embed code into the source code view - pasting into the visual editor will not display the map correctly.
Paste the embed code you copied from Google Maps into the source code editor.
Important: The map embed code must always be added via the Source Code view, not the standard visual editor.
Click Update Block to save your changes.
Step 3 — Adjust the Map Size (If Needed)
The embed code from Google Maps includes default width and height values. In many cases these will fit your block area without any changes, so it is recommended to save the block first and review how the map displays on your live site before making adjustments.
If the map appears too wide, too narrow, or does not fit the designated area correctly:
- Return to Content → Blocks and reopen the map block.
- Switch to Source Code view and locate the
widthandheightvalues within the embed code. - Adjust the values as needed and click Update Block to save.
Click ‘Update Block’ to save the Google map.
Step 4 — Review Your Changes
Once saved, navigate to the relevant page on your website and refresh the page to see your updated Google Map displayed live.
If the map is not appearing as expected, double-check that the embed code was pasted into the Source Code view and that the block has been saved correctly. If you continue to experience issues, contact the Web Ninja support team at support@webninja.com.au.