Creating personalized maps with UMapper and Google

There are different services to create individualized maps that you can embed in websites or blogs. One of them is UMapper, which allows a number of features like setting markers, adding text and photos. You’ll find step-by-step instructions on how to get started with UMapper in this video.

Unfortunately, you can’t add video to markers with UMapper. But you still may want to check this site out because it offers a lot of other interesting features.

For instance, you can create a map quiz using UMapper’s “GeoDart Game” template. Or you can create a twitter map that shows latest tweets containing a selected hashtag or keyword. To see how that’s done, check out this article.

Creating a personalized Google map

The people at Google have summarized the basic steps of how to create a map and embed it into a blog or website very well, so I’ll just copy and paste their instructions here. I hope they won’t mind.

To create or edit a map:

1. Go to Google Maps.
2. Click My Places > Create new map. If you want to open an existing map, check it in the left panel and click Edit.
3. Add a title and description for your map. You can make your map public or unlisted.
4. Use the icons in the the top right corner of the map. These include:

Select button Selection tool. Use this to drag the map and select placemarks, lines, and shapes.

Placemark button Placemark tool. Use this to add placemarks.

Line tool. Click this button to select a tool to draw lines, shapes, and draw lines that automatically snap to roads.

Note that these tools do not appear until you create or edit a map (see step 2).

Once you are finished, click Done.

If you prefer, you can also watch this video that will take you through the process.

Embedding your map in a blog or website

When you have created your map, you need to embed it in your blog.

* Click the embed symbol in the top right corner of your map.
* You should now get a pop-up with HTML code you can copy and insert into a new blog post
* If you would like to customize your map so that it fits the width of your blog’s text column, click “Customize and preview embedded map” below the box with the HTML code
* You should now see a new pop-up that offers different map sizes and a custom option.
* Click “Custom” and change the width and height as you like it. You can see how the preview of your map changes accordingly.
* You may want to zoom in or out using the arrows until the map in the preview window looks just the way you want it to appear in your blog
* When you’ve got the preview looking exactly right, scroll down to the HTML code.
* Copy and paste the code to embed the map in your blog or website.
* Done. Congratulations 🙂