An interactive map on your website helps visitors find your location and builds trust. With Google Maps integration in Sitebuilder, you can easily display your address, directions, and opening hours in a professional manner.

Why Add Google Maps

A map on your website offers many advantages:

  • Visitors find it easier to navigate to your location
  • It enhances local visibility on Google
  • Professional appearance for businesses with a physical location
  • Customers can plan a route directly
  • Show multiple locations on a map (handy for chains)

Adding a Map to Your Website

Step 1: Place Map Block

  1. Open the page where you want to display the map
  2. Click on the plus icon to add an element
  3. Search for Map or Google Maps in the elements
  4. Drag the map block to the desired position

Step 2: Set Location

  1. Click on the map block
  2. Open the Settings
  3. Fill in your address:
    • Street name and house number
    • Postal code
    • City name
  4. Click on Search to find the location
  5. Check if the pin is in the correct place

Step 3: Adjust Map View

Customize the appearance to match your website:

Zoom Level

  • Choose how zoomed in the map starts
  • Close (street level) or further away (city level)

Map Type

  • Roadmap: Standard street map
  • Satellite: Aerial photos
  • Terrain: Elevation lines and natural elements
  • Hybrid: Satellite with street names

Customize Marker

The standard red marker can be personalized to stand out.

Upload Custom Marker

  1. Select the map
  2. Go to Marker settings
  3. Click on Upload custom marker
  4. Upload your logo or icon (PNG recommended)
  5. Adjust the size

Marker Info Window

Add information that appears when clicking on the marker:

  1. Click on Edit info window
  2. Add:
    • Business name
    • Address
    • Phone number
    • Opening hours
    • Link to directions
  3. Style the window as desired

Advanced Options

Show Multiple Locations

Do you have multiple locations? Show them all on a map:

  1. Select the map
  2. Click on Add location
  3. Fill in the second address
  4. Repeat for all locations
  5. The map automatically zooms to show all pins

Add Directions

Make it easy to get to you:

  1. Add a Directions button below the map
  2. Link to Google Maps with your address
  3. Visitors can navigate directly from their location

Map Styling

Adjust colors to match your website:

  1. Go to Advanced settings
  2. Select a Map style:
    • Standard (colorful)
    • Silver (subtle gray)
    • Dark (for dark websites)
    • Retro (vintage look)
  3. Or create a fully custom style

Set API Key

For advanced features, a Google Maps API key is required.

Request API Key

  1. Go to Google Cloud Console
  2. Create a new project
  3. Enable the Maps JavaScript API
  4. Create an API key
  5. Restrict the key to your domain for security
  1. Go to Sitebuilder settings
  2. Navigate to Integrations
  3. Paste your API key under Google Maps
  4. Save and test the map

Map on Contact Page

The most common place for a map is the contact page. Here’s how to create an effective contact page:

Layout Suggestion

  1. Add a two-column layout
  2. Place contact details on the left
  3. Place the map on the right
  4. Add a contact form below

Contact Details Next to Map

Show next to the map:

  • Full address
  • Phone number (clickable on mobile)
  • Email address
  • Opening hours
  • Social media links

SEO and Local Visibility

A map not only helps visitors but also your position in local search results.

LocalBusiness Schema

Add structured data:

  1. Go to SEO settings
  2. Enable LocalBusiness markup
  3. Fill in all business details
  4. Google understands your location better

Google My Business

Combine your map with a Google My Business profile:

  1. Claim your business in Google My Business
  2. Add the same details as on your website
  3. You will appear in local search results and Google Maps

Mobile Optimization

Check if your map works well on mobile devices:

Touch Interaction

  • Users can zoom in by pinching
  • Scrolling on the page continues to work
  • One finger does not accidentally drag the map

Responsive Size

  1. Test the map on different screen sizes
  2. Adjust the height for mobile if necessary
  3. Consider a smaller map on phones

Common Issues

Map Not Loading

Check:

  • Is your API key correct?
  • Have you enabled the correct APIs?
  • Is your domain allowed in the API settings?

Incorrect Location

  • Check the address for typos
  • Add postal code for precision
  • Manually move the pin if necessary

Slow Loading Time

  • Load the map only when it comes into view
  • Use a static map image as an alternative
  • Limit the number of markers

Need Help?

We are here for you! Are you facing any issues or do you have questions? Our support team is happy to assist you personally. Send us a message via the ticket system - we usually respond within a few hours and are happy to help.