How to Add a Map Using OzSpeed hPanel

Adding a map to your website is a great way to help visitors find your business location easily. Whether you’re showcasing your office, store, or event venue, a map can provide clear directions and boost user experience. With OzSpeed’s Website Builder, you can quickly embed a map and customize it to fit your website’s style. Here’s how to do it step by step.

---

Step 1: Access the Website Editor #

To start adding a map, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to add the map, typically on the Contact Us or About Us page.

Tip: #

• Placing the map near your contact information makes it easier for visitors to locate your business.

---

Step 2: Add a Map Element #

You can drag and drop a Map Block onto your page using the Website Builder.

How to Add a Map: #

1. Click Add Element or + Add New Section in the editor toolbar.
2. Select Map from the list of elements.
3. Drag the Map Block to the desired location on your page.
4. Click Insert to place the map.

Tip: #

• Use a large, centered map for better visibility, especially if your business relies on local customers.

---

Step 3: Customize the Map Location #

You can set the map location to show your business address or any other relevant place.

How to Set the Location: #

1. Click on the Map Block to open the settings panel.
2. Enter your business address in the Search Location field (e.g., “123 Main Street, Sydney, Australia”).
3. Click Search to update the map with the new location.
4. Adjust the zoom level to show more or less detail as needed.
5. Click Save.

Tip: #

• Use a zoom level that clearly displays nearby landmarks or major roads to help visitors find your location easily.

---

Step 4: Customize the Map Design #

You can style the map to match your website’s theme.

How to Style the Map: #

1. Click on the Map Block to open the Design Settings.
2. Choose the map style (default, satellite, terrain).
3. Adjust the width and height of the map for better fit and visibility.
4. Click Save.

Tip: #

• Use the satellite view for a realistic look or the terrain view to highlight geographic features.

---

Step 5: Add a Map Marker (Optional) #

A map marker can highlight your exact location, making it easier for visitors to find.

How to Add a Marker: #

1. Click on the Map Block and go to the Marker Settings tab.
2. Click Add Marker and place it on your desired location.
3. Enter a title and description (e.g., “Our Office” or “Main Store”).
4. Click Save.

Tip: #

• Customize the marker color to match your brand’s colors for a cohesive design.

---

Step 6: Preview and Test the Map #

Before publishing, preview the map to ensure it displays correctly and functions well.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the map on both desktop and mobile views.
3. Zoom in and out and click on the marker to verify it’s working as expected.

Tip: #

• Use an incognito window or clear your browser cache to view the changes as a new visitor would.

---

Step 7: Publish the Changes #

Once you’re satisfied with the map’s appearance and functionality, publish your updates.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Share your new map feature in your contact page update or newsletter to let your customers know they can now easily find your location.

---

Troubleshooting Tips #

1. Map Not Displaying Properly:
   • Ensure the address is correctly entered and formatted in the location settings.
   • Clear your website cache in hPanel and your browser cache.
2. Map Marker Not Appearing:
   • Double-check that the marker is enabled in the Marker Settings.
   • Zoom in on the map to ensure the marker is visible.
3. Map Not Responsive on Mobile:
   • Use the responsive design settings to adjust the map size for mobile devices.
   • Test the map on different devices to ensure it displays correctly.

---

Additional Tips: #

• Include Contact Information: Place your phone number, email address, and hours of operation near the map for easy reference.
• Embed a Google Map: If you prefer using a Google Map, generate an embed code from Google Maps and paste it into an HTML Block on your page.
• Monitor User Interaction: Use tools like Google Analytics to track clicks and interactions with the map.