Embedding a Map

by SarahL195 in Circuits > Websites

779 Views, 11 Favorites, 0 Comments

Embedding a Map

Funny-Pictures-4-01.jpg

Whether you want to show different routes to the same place or convey how many pizza restaurants there are in your vicinity, the ability to create a map will allow you to effectively present information in a visual way. Here's what you need:

  • Google account
  • Names of places and their addresses
  • A website to embed your map

For this example, I will create a map using the following information:

Top 5 pizza places in Austin (in no order)

Bufalina - 1519 E Cesar Chavez

Backspace - 507 San Jacinto Blvd

House Pizza - 5111 Airport Blvd

Via 313 - 3016 Guadalupe St

Little Deli & Pizzeria - 7101 Woodrow Ave

First Things First...

1.png

Create a new map in ‘Google My Maps.’

Naming Names

2.png
2b.png
2a.png

To add a pin, search an address. It will be added as an ‘Untitled Layer,’ which you can change by clicking on it. You can also change the title of the map this way.

Note: If you don’t click ‘Add Layer’ after each address has been entered, it will continue adding to the layer of the previous address. If you want to create a map in various cities or categories, click on ‘Add Layer.’

Next...gather Your Addresses and Customize Your Pins

3.png
3a.png
3c.png

Once the address has been entered, click on ‘+Add to Map’ or hover over the address in the left side bar and click on the plus sign that appears. If you don’t want the address as the name of the pin, rename the pin by clicking the pencil. If you change the address to the name of the business, Google maps will eventually change it for you. Otherwise, you can change the name to anything you’d like. You can also add photographs and descriptions, change the color or icon for the pin, or delete it entirely.

Lather, Rinse, Repeat!

4.png

Repeat step 5 until your map is complete.

Zoom Zoom Zoom

5a.png
5b.png
5c.png

Zoom out enough to see each pin on your map but clicking on the minus sign in the bottom right hand corner. Click on the three dots next to the map title and select ‘set default view.'

Unlock Your Map

6.png

Click on share then change who has access to public.

Almost There!

7.png

Click on three dots again and then ‘embed this map.'

Note: Depending on which platform you’re embedding your map on, the option to insert the embed code might be in different places. It’s usually under any button resembling ‘add media.’ It’s important to do this because if you don’t, your map will probably be published as the code instead or possibly not at all.

Another note: If you publish it and a pin is cut off or too close together once you add the correct zoom on it, simply revert to the map drag and around. For example, if the pin and the top of your map is slightly cut off from the rest, drag the map a little higher. You can then click on ‘Set default view’ and it will change. If you change it, you will have to enter the code again.

*Optional*

8.png

If you'd like to zoom in more within your embedded map, read further! Within the embedded code on your website, type ‘&z=” with a number right between the link and closing quotes. This gets rid of any “empty” map that isn’t relevant. Depending on how many pins are on your map, you may want more zoom or less zoom. The trick is to mess around with it until you think it looks nice and clean.

Show Off Your Interactive Map-making Skills

9.png

And publish your map for all to see!