Skip to main content

Embedding Google Map

Here are the steps to use Google My Maps to create a map with location pins and embed the map in NUSites. You can also watch a Video tutorial for guidance.

Step 1: Create a Google My Maps Map

  1. Go to Google My Maps: Open Google My Maps in your browser.
  2. Make sure you are signed into your Google account.
  3. Create a New Map: Click the “Create a New Map” button.
    google my maps screen showing create a new map button

 

 

 

 

 

 

Step 2: Add Location Pins to the Map

  1. Search for a Location: Use the search bar to find a location by name or address. Alternatively, you can zoom in on the map and click the spot where you want to add a pin.
  2. Add a Pin: After locating the spot, click the “Add MarPreview/Save/Publish:ker” button (pin icon) at the top of the page. Then, click on the map where you want the pin to be placed.
  3. Edit the Pin Info: After adding the pin, a box will pop up where you can edit the name and description for the location. You can also add images, links, or additional details.
  4. Add More Pins: Repeat the above steps to add more pins to the map as needed.

Step 4: Get the Embed Code

  1. Click on the three vertical dots (menu) next to the map title.
  2. Select “Embed on my site” from the menu.
  3. Copy the provided HTML iframe code.

You can find detailed instructions on Google Maps Help Site.

Step 5: Embed the Map in NUSites

  1. Log into NUSites: Go to NUSites and log into your account.
  2. Edit Your Page: Navigate to the page where you want to embed the map and click the “Edit” button.
  3. Insert the Embed Code:
      1. In the NUSites text editor, select where you want the map to appear.
      2. Paste the iframe code you copied from Google My Maps into the embed window.
        iframe code in the text area
  4. Preview/Save/Publish:
    After inserting the map, save your changes, Preview  or Publish to make the map visible on your NUSites page.

Step 6: View the Map

Once the map is embedded, you can view it directly on your NUSites page. Visitors can interact with it, zoom in/out, and click on the pins for more information.