1. Knowledge Base
  2. >
  3. Design Tools
  4. >
  5. BaseKit: How to add a Google Map

BaseKit: How to add a Google Map

As of June 19, 2013, BaseKit is not available on new Shared accounts; however, HostGator Website Builder is offered as a replacement.

In BaseKit, you can use the Google Maps Content Widget to insert a interactive Google Map.  You can specify a general location, such as a city or region, or you can specify a specific address.  You have the choice of showing a street map, satellite map or a hybrid of the two.  You can even add markers to the map showing locations you want to draw attention to.

Video Tutorial

Inserting a Google Map

  1. Navigate to the page you want to edit in BaseKit (or create a new page).  The list of pages will be in the left hand corner of the screen.
  2. Open the Content Widget section by clicking on the words "Content" on the left side of the screen (if not already visible).
  3. Locate the icon for Google Maps in the left column, and drag it to where you want it on the page. (Dragging is accomplished by clicking on the Google Maps icon and holding down the left mouse button, while moving the mouse to where you want it to be placed on the page. Once there, stop pressing the mouse button and you will "drop" the Google Map on the page.

Resizing and Moving the Map

When you dropped the Google Map on your page, it expanded to take up as much space as it could.  This may not have been what you intended.  You can change the size or the map as well as move the map to a different part of the page by doing the following:

  1. Click on the Google Map.
  2. You will notice eight (8) white squares along the borders of the map.  You can click on any of those squares, and while you are holding down the left mouse button, stretch and resize the various sides of the map.
  3. You can also click anywhere on the map itself (other than the white squares) or on the Move icon immediately above the map, and while holding down the left mouse button, drag the map anywhere on the page you want it to appear.

Change the Location Shown on the Map

When you first place the map, it does not know the location you want to show, so it just picks a place.  Since that is probably not what you want it to show, you can change it by:

  1. Double Click on the Map or Press the little Gear icon directly above the map.  This will cause the settings dialog box to appear.
  2. Where it says "Find Address," enter the location or street address that you want centered on the map.
  3. After you type in the location or address, press the enter key on your keyboard (while your cursor is still in the "Find Address" field.  This will center the map on the location. 

Note: Google tries to guess what you mean if you are not specific enough, and sometimes it guesses wrong.  Be sure to be as specific as possible to make sure the correct location shows up.

Configuring the Map

You can select the type of map, the zoom level and whether the zoom and pan buttons appear on the map. 

To make these changes, you will need to open the Settings dialog box by double clicking on the map or pressing the little Gear icon directly above the map.  Once there, you can make the following changes:

  • Map Type: Use the drop down menu to select from Street Map, Satellite Map, or Hybrid Map.
  • Map Zoom: Use this control to determine the zoom level.  Drag the dot to the left to zoom out, and drag the dot to the left to zoom in.
  • Zoom + pan buttons: Check the box next to "zoom + pan buttons" to allow your visitors to control the zoom level and move around the map.  If it is unchecked, visitors must view the map exactly how you configured it and cannot change it.

Adding Markers to the Map

When you select the address, it only centers the map on that location, but does not put a marker.  You can add markers to the map and chose from different marker types.  You are not limited to one marker and you can even use your own image as the marker.

  1. Double Click on the Map or Press the little Gear icon directly above the map.  This will cause the settings dialog box to appear.
  2. Click on the marker you want to use and drag it to the location on the map.  (Dragging is done by holding down the left mouse key while moving the mouse to where you want it to be placed.  Once there, let go of the mouse button to drop the marker on the map.)

Adding Your Own Marker Image

To use your own image, you will first need to add an image to BaseKit.  Once added, it will show up on the images list in the "Media" section under images.  For the best effect, you may want to use an image with a transparent background.

  1. Click on the Media tab in the left column.
  2. If you have not added the image yet, you will need to add an image.  You can do that by clicking on "+ Add" and it will open a dialog box asking which image you want to upload.  Find the image on your hard drive and click on the OK or Open button to upload the image.
  3. Locate the image in the images tab.  (Click on the word "Images" to expand it, if necessary.)
  4. Click on the image you want, and drag it to the gray square that says "Drop your image above."  Once you drop it there, it will add it to the list of available markers.
  5. Now that it is on the list of available markers, you can now drag it anywhere on the Google Map.