Daniel Sato

Making your first map

Maps are an increasingly popular tool to help add interactive content and provided added value to stories that might not lend themselves to other forms of multimedia. Unfortunately, the reality at most small market papers is that there is no budget for a web team, let alone someone who specializes in databases, code, etc. Luckily, you don’t have to be familiar with Mapnik or know your way around Google Maps API to produce an interactive map.

Google My Maps

To create your first map, load Google Maps. You will click on the My Maps link near the upper-left, and then, if you are signed in to your Google account, select “Create new map.” (If you are not signed in, there will be an introductory video, and a button to Get started.) You then select create new map to start working on your map.

Step 1

To add a point to the map, click on the Add a Placemark button on the top-left of the map area (see red arrow in image below), and then click the location on the map where you want to add the placemark. A infobox will pop up, allowing you to enter a title for the placemark (which will then show up in the left sidebar) and any additional information. As you can see below, I added three placemarks to my map, and am able to add a description to each using either plain text, rich text, or html. Using html, I can include images, embed related video, add links, etc.

Step 2

Now that we have added a few placemarks, we have the beginnings of a map that is polished enough to put with a story. However, the generic placemark icon is not that informational, and sometimes it is useful to vary the color if you have different types of locations (restaurants, parks, schools, etc.) To change a placemark, first click on a location to bring up the infobox. Then, click on the placemark icon on the upper-right corner of the infobox. The infobox should now display the default set of icons with My Maps. Select a new icon that is appropriate for the location.

Step 3 Step 4

For the most basic of maps, the default My Maps icons will be adequate. However, it is likely that you will soon find yourself looking for an icon that is not there. For that, you can go to the Google Maps icons collection on the Google code site.

Placemarks

To add your new custom icon to your My Map, you will need that icon’s url. Either download it from the icons collection site and upload it to your own space, or right click on the icon and copy the image location. Now, go back to your map, and select the placemark in the upper-right corner of the infobox as you did previously. This time, click on Add an icon, in the upper-right. It will ask you for a url for your icon. Paste in the location of your custom icon (either where you are hosting it, or the url that you got by copying image location from the icons collection page). You know have a map with custom icons and embedded photos, video and links … but you are not quite done yet.

Map

The problem with My Maps is that, when you embed your map into a page, you lose the left sidebar which lists the locations you have added to the map. While this is not a problem for a map with only four entries, it can be difficult to navigate on a map with multiple entries, especially because you do not know what each location is without clicking on it.


View Garden City in a larger map

Map Channels

To remedy the problem of the missing sidebar, you can import your map into Map Channels. Once in Map Channels, you can link a Map Channels map to any number of Google My Maps. You simply enter in a map’s MSID number (found by clicking on the “Link” button on your Google map, and then copying the html link. At a certain point it will say msid= the following sequence is the MSID) to pair a Google map with a Map Channel map.


5 Comments, Comment or Ping

  1. Thanks for the tutorial.
    May I know how to embed it into wordpress?
    I’m using both wordpress.org and wordpress.com, and I can’t just put the html into it, wordpress will edit the html and change, so it can’t be view.

    And “Upgrade to Pro User Status to disable ads or to use your own Adsense ID.” on No 14. Adverts. How?

  2. Daniel Sato

    When I first started using Map Channels, you had the ability to turn ads off with the free version. I believe that has since changed.

    As for embedding, I have had trouble with this as well. Try switching to htlm view, pasting the code in, saving your post and then viewing it. Sometimes, at least for me, switching back to the WYSIWYG editor is what screws the code up.

  1. uberVU - social comments - Apr 7th, 2010

Reply to “Making your first map”