1. bluehost knowledge base

Builder - How to Add a Map

This article applies to the Bluehost Builder (our express website editor not connected to WordPress). For information about using the Bluehost Website Builder (for WordPress), please see Bluehost Website Builder (for WordPress) - How to Add and Delete Pages.

If you are not sure which version you are currently using, please see Bluehost Website Builder (for WordPress) vs. Bluehost Builder for more information.

When you think about a service-based website or a website that's informing people of dates, times, places, or locations, it only makes sense to provide your people with a visual reference like a Google Map. Google Maps aren't just for business purposes either; imagine you're doing a fundraiser for youth sports, or maybe you're creating a historical page for a city or town. Ideally, showing where you're coming from is essential!

This article will cover how to add an interactive map to help viewers visualize your location clearly and find you faster. We will also discuss some of the basic settings available to enhance your Map.

Adding a Map

  1. Log in to your Bluehost control panel.
  2. Click the My Sites tab from the side navigation menu to the left.
  3. Click on the Go to Builder button. 
    rock-mysites-gotobuilder
  4. Navigate to the Sections tab in the left-hand corner of the main design dashboard.
    builder-sections
  5. Type Map on the top search bar or click on the Map element from the list on the left panel.
    builder-maps
  6. You may also click on Address if you want to include a textual address with your map.
    builder-address
  7. After you click your chosen Google Map element, you will be able to drag and drop the map anywhere on your page.
  8. Once you place your map, the Map Toolbar will appear on the right side. This is where you can adjust some basic settings.
    builder-map-attributes
    • Under Settings tab:
      • You will be able to choose from the different available Layouts and whether you want it displayed in Full width or not.
      • You may also click on Manage Markers or the visual points in the map: Zoom in or out of the displayed map, change Map Type from Roadmap to Terrain, Satellite view, or Hybrid, and even enable or disable Greyscale mode.
    • Under Background tab:
      • You will be able to choose a Color and customize a Pattern, including its Strength and Animation.
        builder-map-bgcolor
      • You may also add a background Image, and personalize its Overlay function, such as Opacity and Animation too.
        builder-map-bgimage
      • Adding a Video is also possible with the same editable attributes as the image.
        builder-map-bgvideo
  9. Be sure to Save and Publish your site to save the changes. 
    builder-save-publish

Although there are a lot of options in the Map Toolbar, these are all essential for fully personalizing your page and elements; its behaviors or style, size & position. The best recommendation is to start by getting in there and testing all the options to see what they do.

Pro Tip: The map element is interactive and allows for your visitors to zoom, navigate, and even access a street view of your location, just as if they were using Google Maps. You can resize the map to fit the width of your page or keep it small as it is. Many websites feature a Map next to their contact form or on their event details page.