1. Knowledge Base
  2. >
  3. How To Add A Map

How To Add A Map

Looking for help for the GATOR Builder by HostGator Website Builder product? Please see GATOR's Knowledge Base.
This content only applies to those using GATOR Builder by HostGator.

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!

In this article, we 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. To begin, Navigate to the "+Elements" tab in the left-hand menu from the main design dashboard.

    User-added image

  2. From the "+Elements" tab, search for and select "Maps" then select the "Google Map" element.

    User-added image

  3. After you click the Google Map element, you will be able to drag and drop the map anywhere on your page.

    User-added image

  4. Set the map by clicking on it when you have placed it in the location you like.

    User-added image

  5. Once you "set" your map, the Map Toolbar will appear where you can adjust some basic settings.

    • Add Map Markers or visual points onto the map
    • Change Map Type from road maps to terrain or satellite view and more
    • Adjust the Interactive Map Settings and "Street View"
    • Zoom In or Out of the displayed map
    • Attach a Link to the Map
    • Add an Animation to the Map
    • Bring the Map forward/backward in regards to other layers
    • Delete The Map
    • More
  6. From the Map Toolbar you can:

  7. Click on "More" from the Map Toolbar to reveal an expanded toolbar.

    User-added image

  8. An extensive menu will appear over the selected image with some more tools to adjust your image.

  9. From this Larger Toolbar, you can:

  • Change where the Map Docks on the page
  • Add Drop Shadow
  • Add Glow
  • Advanced Settings

Advanced Settings:

Although there are a lot of the same options in the Settings as there are in the Map Toolbar, you can adjust quite a bit more settings from this section.  Some of the more essential options are SEO elements, 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.

User-added image

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.