How to create your own online map: Google My Maps

[flickr]photo:6215938137[/flickr]

You could make a digital, online version of this map that residents created at the Bloomingdale Trail charrette

We constantly use maps on Grid Chicago, displaying photos of them, or embedding and linking to them. Here’re all the articles with embedded maps. I’ve even gotten John to make a map for the stealth routes! This is a tutorial on how to create your own map.

We use maps as a communication tool and a way to enhance our articles. I’m going to give you some basic knowledge to create your own map using online tools so that you can identify issues and solutions where you live, which you can easily share afterwards. I’ll describe four simple ways to create a map. Before that, though, I’ll describe how to choose one. In a second post I will describe the evolution of using maps as communication, and that’s to turn them from one-way – publishing, like the bike crash maps – to two-way – accepting reports from others, like the Chicago Sucker Pole map (which uses Ushahidi). Since there are four tutorials, I’m going to break them up into four articles (vote in the comments for the next tutorial I should write).

  1. Google Maps – Use this if you want to click on a map to create markers for places, or draw boundaries, paths, or roads. This is by far the easiest way to create a map to share with others, but is not a good choice if you have a table of data.
  2. BatchGeocode – Use this if you have a spreadsheet or table of data that includes addresses for places.
  3. GeoCommons – Use this if you have a spreadsheet or table of data that includes addresses for places AND you want to add other geographic elements, like ward boundaries or bike lanes.
  4. Fusion Tables – Use this if you have a spreadsheet or table of data that you may want to join with other tabular data, or you want to run rudimentary math functions (like a spreadsheet) and then display the results on a map. You need to have geographic coordinates, a KML file, or rows with full addresses in them. It can import spreadsheets from Google Docs.

Google Maps

I’ve written this tutorial in a way that assumes you’ve used Google Maps a couple times before but have never created your own map. If you have data in a table, do not use this method to create an online map: it’s very inefficient. Wait until I wrote another tutorial. If you want to create a map that uses Chicago Transit Authority data (to show were service has decreased, or the density of bus stops) wait until I wrote another tutorial.

  1. Go to Google Maps.
  2. Click the gray My places button beneath the Google logo, which is left of the map.
  3. Click the red Create Map button.
  4. Add a title and short description. You cannot use HTML and any URLs you paste will not be “clickable”. Go ahead and click Save. While My Maps (its former name) saves continually, it doesn’t seem to save after every change. You should click Save after every new feature you create.
  5. Using the search field above the map, search for the location that will be the basis or center of your map. For this exercise, we will be creating a map of places that people walking or cycling can cross Lake Shore Drive downtown.
  6. Search for “500 N Lake Shore Drive, Chicago, IL”. Zoom in so you see Lake Shore Drive, Grand Avenue, and Illinois Street in the view (see screenshot 1).
  7. Click on the squiggly line button in the upper left corner of the map. Click once on the west side of Grand and Lake Shore Drive, and then click a second time on the east side of Grand and Lake Shore Drive. Then click the second dot to finish drawing the line.
  8. A window will appear: type “Grand Avenue” as the title. You can change the color and line thickness if you want. You can also add a description and even upload images or embed them from other websites.
  9. Repeat steps 7 and 8 for every place you can cross Lake Shore Drive. The list of crossings I know about are listed at the end of the article.
  10. When you are done creating and customizing the features, click Done (clicking Done also saves your work).
  11. Now you’ll probably want to share this with others, or embed it in a website. To get the URL, click the chain link icon above the red Edit button. Click the Short URL checkbox and copy the resulting URL. To embed the map (just like I did in this article), click on the same chain link icon and then click on “Customize and preview embedded map”* (see screenshot 3).
  12. On the customize page, you can change these things: the map size (the maps on this site are 540×350), the map zoom (just zoom in or out), the center of the map (change this after you change the map size), and which map layer is shown by default (terrain often looks the nicest while satellite is the most visually “busy”). The Earth view gives a cool perspective, especially of downtown because it shows 3D buildings designed by contributors around the world – the caveat is that the user needs the Google Earth Plugin to see it (they can easily switch to one of the other views). Copy and paste the HTML into your webpage (it’s possible to paste the code into the HTML panes of WordPress, Blogger, and Tumblr).

[flickr]photo:6663825405[/flickr]

Screenshot 1, showing adding the first feature to the map. 

[flickr]photo:6663826831[/flickr]

Screenshot 2, showing how to get the map’s link and embedding code. 

[flickr]photo:6663827865[/flickr]

Screenshot 3, showing how to select people to collaborate with. 

[flickr]photo:6663830019[/flickr]

Screenshot 4, showing a fancy bike rack of Portland, Oregon. 

Advanced features

You can draw shapes, too (no circles, unfortunately). Just click on the down arrow next to the squiggly line button and click Draw a shape. Keep in mind that there’s not an undo for the shape’s vertices, but you can move them by clicking and dragging the little squares.

Let other people help create the map with you. Click the Collaborators link and in the popup window, invite specific people or let the public edit the map (see screenshot 3). My friend Travis Wittwer created a publicly-editable map of artistic and non-standard bike racks in Portland, Oregon (see screenshot 4).

Take your map with you in a couple of ways: Access it as a layer in the Maps application of your iOS or Android device, or download the KML and share the file by email. KML files can be viewed in Google Earth and imported in other applications.

At least one of the Streets for Cycling 2020 Plan districts, West, used Google My Maps to collect input on assets and barriers to cycling in that area. I would have chosen a different method that made it easier to collect and then output the data from collaborators. For example, CrowdMap can accept input from users and output the results as a spreadsheet.

What maps will you create?

View Pedestrian and cycle crossings of Lake Shore Drive downtown in a larger map

Places to cross Lake Shore Drive downtown

  • Grand Avenue
  • Illinois Street
  • Riverwalk (DuSable Harbor)
  • Riverwalk (south)
  • Lower Randolph Street
  • Monroe Street (north side)
  • Jackson Drive (north side)
  • Queen’s Landing
  • Balbo Avenue
  • Underpass at Roosevelt Road

* If the link is not available, make sure you are NOT in Edit mode and then refresh the page, and click “My places”, the map you’re working on, and then the chain link icon

22 thoughts on “How to create your own online map: Google My Maps”

  1. I like having Google Maps as an available tool.  Unfortunately, I’ve found one GM tool that could be very useful (draw a line along roads) to be quirky and difficult to use, at least with my operating system/browser combination.  It tends to invent its own routes, so I just use “draw a line” instead.

    1. I was showing John how to overcome that quirk:

      After you’ve started your “line along roads”, click on the street, to add a dot, BEFORE you make a turn. Then move the mouse slowly around the turn at an intersection until you see that the line is following your mouse. 

      What I believe is happening is that the map programming is constantly calculating driving directions between the previous point and where your mouse is currently hovering. That’s why it may look funny. 

      The “line along roads” feature will not let you go the wrong way on a one-way street. 

  2. All those proposed tutorials sound interesting. I’ve been meaning to learn some mapping, thanks for posting this.

    1. There is a demonstration event tonight (Thursday, Jan 12, 2012) at Hacks/Hackers at Matilda on Belmont/Sheffield. http://meetupchicago.hackshackers.com/events/16978049/Show up for the first Hacks/Hackers Chicago meetup of 2012 to learn all about Google Fusion Tables, which our friends at HHNYC describe as “a spreadsheet on steroids with souped-up visualization capabilities.”Local H/H members will walk throughexamples of their work, taking spreadsheets of public records and turning them into tables, maps and charts. If you want to learn more about it, start here.

    1. The only change I can remember is calling it “My places” instead of “My Maps”. I prefer “My Maps” and I used it in this tutorial. 

      What other features have changed?

      Have you tried using MapMaker? Ugh. I will stick with OpenStreetMap (I’ve barely gotten started on OSM). 

      1. Sorry for the delay. One of the main features removed was allowing you to overlay one map with another. So say you had a bus route map, and a bike lane map, you used to be able to toggle them at will to see how they overlayed.

        They also made it almost impossible to find maps created by other people.

        And yes, mapmaker is extremely frustrating. “Tell us about the area you know best!” * submits change*  “denied because we cant see it”  Well no shit, your imagery is 2 years old.

        1. I can’t say I remember that feature.

          I removed a feature on Kinzie at Clinton from Google MapMaker and someone asked me to put it back. I held firm and said the slip lane was removed in 2011 because of the new Kinzie Street bike lane.

    1. There is a demonstration event tonight (Thursday, Jan 12, 2012) at Hacks/Hackers at Matilda on Belmont/Sheffield.

      http://meetupchicago.hackshackers.com/events/16978049/

      Show up for the first Hacks/Hackers Chicago meetup of 2012 to learn all about Google Fusion Tables, which our friends at HHNYC describe as “a spreadsheet on steroids with souped-up visualization capabilities.”Local H/H members will walk throughexamples of their work, taking spreadsheets of public records and turning them into tables, maps and charts. If you want to learn more about it, start here.

  3. Is there a good way to print one of these google maps?  I’d like to print one for the South Side Streets for Cycling Region, but it’d be good to view it as a borderless photo, so we can fit as much into the page as possible.  Do you know if that’s possible?

    And if anyone wants to give feedback on bike routes on the South Side, let me know!

    1. Google Maps has a print option. It’s a tiny, indecipherable printer icon next to the chain link icon (see screenshot 2). Click on that and a window will pop up with printing options. 

      1. I can use that to print, but I’m not seeing any real printing options — how do I make the map a bigger proportion of the print out?  Can I print map only?  If I have a larger format printer, can I print a larger map?   Looks like maybe I need to move over to Google Earth, and see what the options are there.

        1. I’m thinking you have two options right now:

          1. Download your Google My Map as a KML and open in Google Earth and try printing from there. 

          2. Print to PDF from Google Maps and use Adobe Acrobat Reader, Apple Preview, or another PDF reader to adjust printing options. 

Leave a Reply to Steven Vance Cancel reply

Your email address will not be published. Required fields are marked *