Advanced Map Block Basics
Learning Objectives
By the end of this chapter, you'll be able to:
- Set up and configure advanced map blocks in SquareWebsites
- Customise map appearance and add interactive features
- Optimise your maps for mobile devices and performance
Introduction
Maps can transform a basic website into something genuinely useful for your visitors. This chapter covers the advanced features of SquareWebsites' map blocks, helping you create interactive maps that work brilliantly across all devices.
We'll walk through the setup process, show you how to customise your maps, and share the tricks that make the difference between a basic map and one that really serves your audience.
Lessons
Setting Up Advanced Map Blocks
SquareWebsites offers built-in map functionality through its block system. The advanced map block gives you more control than the basic version.
Step 1: Add the Map Block
- Click the '+' button where you want your map
- Search for "Map" in the block menu
- Select "Map Block" (not the basic location block)
Step 2: Configure Basic Settings
- Enter your primary address in the location field
- Choose your preferred map style from the dropdown
- Set your initial zoom level (12-15 works well for most locations)
Step 3: Enable Advanced Features
- Toggle on "Show multiple locations" if needed
- Enable "Custom markers" for branded map pins
- Turn on "Interactive features" for click-to-expand functionality
This is the bit most people miss: The map style you choose affects loading speed. Street view loads faster than satellite imagery, especially on mobile connections.
Customising Map Appearance
The default map might not match your site's design. Here's how to make it fit perfectly.
Adjusting Visual Elements
- Map height: Set between 300-500px for desktop viewing
- Border radius: Match your site's button styling for consistency
- Colour scheme: Choose from preset themes or upload custom styling
Adding Multiple Locations
- Click "Add location" for each additional pin
- Use different marker colours to categorise locations
- Add custom descriptions that appear when pins are clicked
Custom Markers
- Upload your own marker images (PNG format, 40x40px recommended)
- Use consistent styling across all markers
- Include your logo or brand colours for recognition
Roll your sleeves up with the styling options. Test different combinations to see what works best with your overall design.
Mobile Optimisation and Performance
Maps can slow down mobile sites if not configured properly. Here's how to keep them fast and functional.
Mobile-Specific Settings
- Reduce initial zoom level by 1-2 steps for mobile
- Enable "Touch gestures" for pinch-to-zoom functionality
- Set map height to 250px maximum on mobile devices
Performance Optimisation
- Limit the number of visible markers to 10 or fewer
- Use compressed images for custom markers
- Enable "Lazy loading" so maps only load when visible
Testing Your Setup
- Use SquareWebsites' preview mode to test mobile appearance
- Check loading times on different connection speeds
- Verify that all interactive features work on touch devices
Here's the quick version: If your map takes more than 3 seconds to load on mobile, reduce the number of markers or switch to a simpler map style.
Practice
Create a map showing three locations relevant to your business or project. Configure each location with a custom marker and description. Test the map on both desktop and mobile to ensure it loads quickly and functions properly.
Try different map styles and note which one loads fastest while still providing the information your visitors need.
FAQs
How do I add multiple locations to my map block?
In the map block settings, toggle on "Show multiple locations" then click "Add location" for each additional pin. You can add up to 20 locations per map block.
Can I use custom markers with my own branding?
Yes. Upload PNG images sized 40x40px in the marker settings. Keep file sizes under 10KB for best performance.
Why does my map load slowly on mobile?
Large maps with many markers or high-resolution satellite imagery can slow loading. Try reducing the number of markers or switching to street view style.
How do I make my map match my site's design?
Adjust the map height, border radius, and colour scheme in the block settings. You can also upload custom markers that match your brand colours.
Jargon Buster
Map Block: SquareWebsites' built-in tool for adding interactive maps to your pages
Markers: The pins that show specific locations on your map
Lazy Loading: A technique that delays loading the map until visitors scroll to that section of your page
Zoom Level: How close the map appears initially (higher numbers show smaller areas in more detail)
Wrap-up
You now know how to create maps that work well for your visitors and load quickly on all devices. The key is balancing functionality with performance – give people the information they need without slowing down your site.
Next, you might want to explore how maps integrate with other SquareWebsites features like contact forms or booking systems.