How-To: Putting Google Maps on Your Blog

Here is a map of our scavenger hunt. As of 11:30 a.m. Thursday, there was a single point on it for Martin Hall, but by 1 p.m., it will have points for a number of your scavenger hunt finds.

To create any map, you first need to go to maps.google.com, sign in with your Google ID, then click the “My Places” button. From here, there are two options:

  • Click the big red “CREATE MAP” button: This will take you to Google’s new Maps Engine, which is a powerful tool that is NOT (yet) embeddable in WordPress, so DON’T DO THIS. Instead…
  • Click the “Create with classic My Maps” link below the red button.

Once that’s done, give your map a title and description, make sure it’s listed as “Public,” then do the following steps:

Making Markers

  • To mark a point manually:
    1. Click the blue marker icon (looks like a balloon) at the top left of the map view
    2. Click to place it on the map (you can drag it to a different spot after placing)
    3. Enter a name and description in the box that appears
      • You can change its appearance by clicking the marker icon in the top right of this box
  • To mark a specific location:
    1. Enter the address of the spot you want to map in the field at the top
      • Search markers will not show up in your final map – only the ones you place
      • There’s an issue where the first point sometimes doesn’t appear (but can’t be deleted). I’m not sure why. If it happens to you, just leave it blank and move on.
    2. Select the marker and click “Save to Map” in the pop-up window
    3. Click the marker to provide a title and description, change its appearance, and add rich text (e.g., bolding) or HTML (e.g., links)
      • You may need to switch to “Plain Text” to get rid of any existing content

Other tools

  • You can draw lines (e.g., past or future routes) with the line tool at the top left. Click each point where you want the line to stop or bend, and double-click to end the line. You can edit the description just like with markers.
  • You can also draw lines that follow road or draw shapes (to designate two-dimensional areas) by holding down the mouse on the line icon. You can complete a shape by double-clicking or clicking on the first point, and can edit it as usual.

Collaborating

  1. More than one person can work on a single map. They will need a Google account (I’m not sure if WVU’s Gmail accounts work with this – try it and let’s see!).
  2. Once in Edit Mode, click the “Collaborate” link in the top left.
  3. In the window, enter the gmail addresses of the people to invite (separate with a comma)
    • You can also decide whether new people can invite others
  4. Click “Send Invitations”

Embedding Maps in Your Blog

  1. Once finished, click the link icon at the top of the left-hand side
  2. In the window that appears, click “Customize and Preview embedded map”
    • Don’t copy the HTML from this first window – it won’t look right
  3. In the new window, zoom/scroll the map to how you want it to look on your blog – you can also change the dimensions of the box in which it appears.
  4. Copy ALL of the HTML text from the window below the map
  5. In a blog post, paste this text at the point in the post where you want the map

Troubleshooting

  • If you don’t see the tools in the top left of your map, you may need to re-click the map name (you MUST add these pointers) and click “Edit” again.
  • Test your post. If the map doesn’t look right, try re-copying and pasting the link. You may need to go into the embed > customize window again to get it right.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: