Advanced Map Block Basics
Learning Objectives
- Add an advanced map block to your SquareWebsites site
- Customise the appearance and functionality of your map block
- Fix common mobile responsiveness issues
Introduction
Adding an advanced map block to your SquareWebsites site makes it more interactive and helps visitors find you easily. Whether you're showing your business location or creating a contact page, maps give visitors the practical information they need. We'll cover everything from setup to customisation, so you can use this feature effectively.
Lessons
Adding Your First Advanced Map Block
Adding an advanced map block is straightforward. Here's how to do it:
Step 1: Log into your SquareWebsites account and open the editor.
Step 2: Navigate to the page where you want to add the map.
Step 3: Click the "Add Block" option and select "Map" from the menu.
Step 4: Choose "Advanced Map" to get additional features beyond the basic map block.
The advanced map block includes interactive elements like clickable markers and detailed customisation options that make your map more useful for visitors.
When you add your map block, try the default settings first. You can see changes in real-time in the editor, which helps you understand how your map will look on your live site.
Customising Your Map
The customisation options help you match the map to your site's design and make it more useful.
Step 1: Click on the map block you've added.
Step 2: Use the customisation panel to change colours, add markers, or adjust the zoom level.
Step 3: Set your location by entering your address or coordinates.
Step 4: Choose your map style from the available options.
Step 5: Save your settings to update the map's appearance.
Different styles and custom markers help your map stand out and provide better information for visitors. You can add multiple markers to show different locations like your office, parking areas, or nearby landmarks.
Fixing Mobile Display Issues
Many visitors use mobile devices, so your map needs to work well on all screen sizes. This is the bit most people miss when setting up their maps.
Step 1: Use the device preview options in the SquareWebsites editor to check how your map looks on different screen sizes.
Step 2: Adjust the map height if it appears too small or too large on mobile devices.
Step 3: Test the zoom and marker functions on mobile to ensure they work properly.
Step 4: Consider reducing the number of visible markers on mobile to avoid cluttering the smaller screen.
If your map still doesn't display correctly, check that you haven't set a fixed width that's too wide for mobile screens. The map should automatically resize, but custom styling can sometimes interfere with this.
Practice
Add a custom marker to your advanced map block that shows your business location or a local landmark. Experiment with different zoom levels and map styles to see how they change the map's appearance and usefulness.
Try viewing your map on different devices to ensure it displays correctly. Make adjustments to the height or marker visibility if needed.
FAQs
How do I add an advanced map to my site?
Open the editor, click "Add Block", then select "Map" and choose the advanced option from the menu.
Can I match the map to my website's colours?
Yes, use the customisation panel to change colours, markers, and styling to match your site's design.
What should I do if the map doesn't display properly on mobile?
Check the device preview in the editor and adjust the map height or marker settings. Ensure you haven't set fixed widths that are too wide for mobile screens.
How many markers can I add to my map?
You can add multiple markers, but consider using fewer on mobile devices to avoid cluttering the smaller screen.
Can I show directions to my location?
Yes, visitors can click on your markers to get directions through their device's default map application.
Jargon Buster
Advanced Map Block – An interactive map feature with customisation options for embedding on your website
Markers – Clickable points on your map that show specific locations or provide additional information
Responsive Design – A website design approach that ensures content displays properly on all device sizes
Zoom Level – How close or far the map view appears, from street level to city-wide views
Wrap-up
You can now add and customise advanced map blocks in SquareWebsites to make your site more interactive and helpful for visitors. The key is testing your maps on different devices and adjusting the settings to ensure they work well for everyone.
Next, try adding multiple markers or experimenting with different map styles to see what works best for your site. Remember to keep mobile users in mind when making changes.