How to make custom maps for free with Google Maps
This is a presentation I gave at the 2019 Southern Interscholastic Press Association conference in Columbia, South Carolina. It is aimed at student journalists, but might be useful to anyone who needs to make a map.
I’m going to show you how I made this:
This is an interactive map of the public school district in which we are currently located. It has points—green dots showing the location of each school within the district. It has a shape—the purple blob showing the borders of the district. Users can zoom in, zoom out, and drag to explore in any direction. They can click on the individual dots and see the address and phone number of each school.
Making and sharing a map like this is easy and free—all you need is a free Google account. You don’t need any special computer skills, but it really helps to have a basic technical understanding of the underlying data.
How spacial data works
Points, lines and shapes that we render on a map come from “spacial data.” All spacial data boils down to a fundamental unit: a pair of numbers representing a single geographic coordinate.
We are currently at a latitude of 34, and longitude of -81.03. How do I know?
I searched Google Maps for the address of this hotel: 1200 Hampton St., Columbia, SC. Then, I right-clicked on the red marker hovering over the hotel, and I selected “What’s here?”
A little rectangular box appeared at the bottom of my browser window. The pair of numbers at the bottom separated by a comma are the coordinates. The first number is the latitude, the second is the longitude.
You can always recognize a pair of geographic coordinates. The latitude will be a number between -90 and 90, while the longitude will be between -180 and 180. The more decimal places that follow, the more precise the coordinate is. Six decimal places, like you see in Google Maps, get you within about a millimeter of the location you’re mapping. Pretty precise!
Just by seeing whether the numbers are positive or negative, you can tell which quadrant of the earth we’re on. The latitude is positive, so we know we’re north of the equator. The longitude is negative, so we know we’re west of the prime meridian that runs through Greenwich, England.
Points on a map, like the green dots on my map representing individual schools, are nothing more than a single latitude and longitude pair—just two numbers.
Shapes on a map, like my purple blob representing the school district, are actually just a series of individual coordinates that Google Maps connects with straight lines, like a connect-the-dots picture.
If you zoom-in really close on my map, you can see how this seemingly curvy shape is actually made up of straight lines between points. For this reason, the shapes we plot on maps are often referred to as “polygons”—figures with three or more straight sides.
The more points you use to approximate curves, the higher-resolution your shapes will be—just like how more pixels per square-inch result in higher-resolution photos. The purple shape on my map is made up of 702 points, but you could use far more points to get a higher-res shape.
Spacial data commonly comes in one of two file formats: shapefile (.shp) and Keyhole Markup Language (.kml). Shapefile is more popular, but Google uses KML. We’ll get back to KML files in a bit. For now, let’s talk about how to get started making your map.
Start your map
Log-in to your Google account, then go to google.com/maps. In the upper-left, next to the search bar, you’ll see three little horizontal lines representing the menu. Click there.
Select “Your places,” then hit the “MAPS” tab. At the bottom, you should now see “CREATE MAP.” Once you click on it, you’ll get a box in which you can start putting your custom information. Click on “Untitled map,” and give your map a name and a description.
Now it’s time to start adding some spacial data.
How to plot points
If you just want to plot a few points, the easiest way to do that would be to search for the address. Google Maps will zoom in on it, and all you have to do is click “Add to map.”
If you don’t know the address, you can simply explore on the map until you find your desired location, then select the “Add marker” tool under the search bar and click to drop your point.
Once you’ve dropped your marker, you can add a title, description and even a picture, video or live webcam stream that users of your map will see if they click on your point.
You can add as many points as you’d like using this method, but if you have dozens of addresses that you want to plot, it could get tedious. Instead, you can prepare a spreadsheet with all of the addresses (or coordinates) you want to plot, and all of the text that you want your users to see when they click on your points, and simply import that sheet in Google Maps.
To plot all of the schools in the Richland One school district, I simply went to this webpage containing all of the schools’ names, addresses and phone numbers, and I copied and pasted the whole thing into a Google Sheet, which you can see here. I worked a little spreadsheet function magic (that’s a topic for a different presentation) and quickly sorted the pasted text into three columns: school, address and phone.
Once you have your locations arranged in a similar spreadsheet, you simply hit the “import” link in you map builder and bring in your Excel file, CSV, Google Sheet or any similar thing, and Google Maps will plot all of your points for you and insert any of the names and annotations you included.
It will ask you to check which columns in your spreadsheet you want to integrate into your map, and then it will ask you which column should supply the name of each marker. In my case, that was the “School” column.
How to plot shapes
Just like you can simply click to drop point markers on your map, you can also draw shapes right onto it. Just click the “Draw a line” tool under the search bar.
With this, you can start plotting points that will be automatically connected with straight lines. If you work your way back to the point you started with, your shape will automatically fill-in with color, and you will be asked to name the new polygon you’ve just created.
This is a great way of making simple shapes, like the outline of a city block. But if you need to make a really complex shape, like the boundaries if your county or school district, you probably don’t want to be drawing that by hand.
Luckily, professional map-makers have already drawn many complex shapes for you, and many are available as free shapefile or KML files on the internet. A great source of such files is the U.S. Census Bureau, which has the shapes of states, counties, cities, neighborhoods, ZIP codes and even school districts. Just search Google for the type of shape you want (“counties,” “cities,” etc.), the format you want (remember that Google Maps uses KML) and the word “Census,” and you’ll probably get what you’re looking for at the very top.
The Census Bureau, like most sources, has far more options available in the shapefile format, but there are many KML options as well, which you can browse here. That’s where I was able to download a KML file of every unified public school district in South Carolina.
One you’ve obtained a KML file, you simply import it into Google Maps. If you’ve already been plotting some points, it’s time to add another layer to your map and plot your shapes. In your new layer, hit “import,” and bring in your KML.
When I brought in the school district file I got from the Census Bureau, I got something a little overwhelming: the shapes of all 82 unified school districts in South Carolina. I only wanted the Richland One district, but the Census Bureau can only give all of them to me at once.
This is a common problem. Most free sources of KML files on the internet will probably give you more than what you want.
You could click into each unwanted shape and delete it by clicking on the trashcan logo in the bottom right, but that might take a long time if you have dozens or even hundreds to get rid of.
Here’s an even bigger problem: This free map-building tool within Google Maps will only allow you to import files up to 5 MB in size. Many KML files you might need will be far larger than that, so you won’t be able to import them at all.
The solution is to go into you KML file and pull out the specific parts you want before importing those into Google Maps. Once you see what KML code looks like, you may be intimidated, but don’t be. This is going to be easier than you think.
Working directly with KML code
First, a little technical background.
KML is a markup language, like HTML (the basic language behind webpages). This means it consists of pairs of tags, each surrounded by <> marks, which modify, or “mark up,” the text between them. For example, in HTML, you can italicize some text by surrounding it with “i” tags: <i>This is the text I want italicized.</i>
The first <i> tag starts the effect of italicizing the text, whereas the </i> tag stops it. Any tag that starts with a forward-slash is known as a “close tag.” Before you open up your KML file, remember that all markup languages use start tags and close tags working together in pairs to modify the text between.
Now, let’s get into your KML file.
To read and edit a document of computer code, like your KML file, you need a plain text editor — TextEdit comes standard on Macs, and Notepad comes on Windows. Open up your KML file in your plain text editor of choice, and have a look.
It may look like a big mess, but the code pertaining to each specific geospatial shape in your document is enclosed by a pair of “placemark” tags. Do a search on your document for the word “placemark,” and the first instance you’ll find is the first tag, which marks the beginning of the first shape in the file. Scroll down, and you’ll see a bunch of lines of code telling you which shape it is (we’ll get back to that), and eventually you’ll see a series of numbers that you should recognize as coordinates. Those are the points with which Google Maps will play a game of connect-the-dots to make a shape.
Keep scrolling past all those coordinates, and a few lines down you’ll find the closing placemark tag: </placemark>
Everything between that first placemark and this closing tag pertains to one specific shape. All you have to do is figure out which one of these pertains to the shape you want to map. In some files, that can be tricky* (see footnote).
For my map of the Richland One school district, it was easy. All I had to do was search for the word “Richland,” and there it was: “Richland School District 1.”
Once you’ve found the data you’re looking for, look above the name, and try to find the placemark start tag (circled in red in the example above). You want to select and copy everything from that start tag to the close tag. Just click, select, and start scrolling down, past all those dozens or hundreds of coordinates, until you get to the </placemark>. Select it all, including the start and close tags, and then copy.
Now, create a new plain text document into which you will paste the code that you want to eventually import into Google Maps. (Note: When you create a new document in TextEdit, it may default to making a rich text doc. You must go up to the “Format” menu and select “Make Plain Text” BEFORE you start pasting in code.)
Paste in the code you just copied. If you want more shapes from the KML file, find them, copy them, and paste into your new document, right underneath your first shape.
You’re almost done, but not quite! Your original KML file contains a bunch of code at the very top that is not specific to any of the individual shapes below; it’s code that makes the whole file work, and you need it. Just go in and select everything from the very beginning until right before the very first placemark tag. Copy that, and paste it into your new document ABOVE everything else.
Then, go back to the original KML, and scroll all the way to the bottom. Select everything below the last closing placemark tag (there won’t be much); copy that, and paste it into your new doc, BELOW everything else.
Now, you can save your new document. Give it a name you’ll recognize, and make sure you give it the .kml file extension at the end of the name, like this:
Now, you can go back to your Google Map, create a new layer, and import your new, custom KML file. Only your desired shape or shapes should appear on the map.
Giving your map some style
Once you have the points and/or shapes you want on your map, you have some limited ability to customize their appearance.
Click on a point or shape, and then click on the little paint can. You can change all the colors, and for the points, you can select from a number of specialized icons, or upload your own custom icon image.
Any changes you make will apply to every element within the same layer. If you want to make changes to just one element in the layer and not the others, click where it says “Uniform style” under the layer name, and change it to “Individual style.”
Note that you can also change which base map appears underneath your custom points and shapes.
Publish and share your map
When your map is ready, hit the “Share” link. Its default status will be as a private link. Hit “Change…” and make your map public to anyone on the internet.
Once you’ve done that, you can copy the URL you get by hitting the “Share” button and share it on social media (or paste into a Medium document, like I did at the top of this page).
Or if you want to embed your map into your website, click on the three dots next to your map’s name, and select “Embed on my site.” You’ll get some embed code that you can copy and paste into your website code or CMS (like Wordpress).
You can also simply export your map as a static image for use in a print publication. Click on those three dots again, and select “Print map.” Then select the size and shape you want, and set the “Output type” to “Image.”
Know your limits
That’s just about all you can do with this free map-making tool inside Google Maps. It’s maybe 90 percent of everything you might want to do in a normal journalistic context, but it’s not everything.
To make something like this beautiful, interactive map by ProPublica showing the presence of dangerous military waste across the United States, you need to use the Google Maps API. Basically, that’s a system that allows you to write code directly into your site that accesses Google Maps and all of its features. If you know what you’re doing, you can build just about anything imaginable, but you have to really know what you’re doing. Also, to access the coolest features (like searches and Street View), you need to buy an API key.
If you’re not quite ready for that, a great (and free) tool to make more sophisticated maps is Tableau Public, but that is a topic for another day!
Footnote:
Finding the specific shape you want inside a giant KML file can be tough if there are many shapes in the file with the same name. This happens, for example, with the names of counties. There are seven Richland counties in the United States, including the one we’re in now. If you download the Census Bureau’s KML file containing the shape of every American county, you’ll need to tell your Richland County apart from all the others. Luckily, there’s another piece of code that will appear near the top of every shape’s code that tells you the state—if you know what to look for.
It’s called the “statefp” code—that’s short for “Federal Information Processing Standard state code,” which is a unique numerical code the feds have assigned to each state alphabetically. As you can see in this Wikipedia chart, the statefp code for South Carolina is “45.” Now, all you have to do is go into your KML file and find where your main search term (“Richland”) occurs near the statefp code of 45. Once you’ve spotted it, copy and paste everything within (and including) the surrounding placemark tags, and you’re set!
