In this post I’m gong to give you the code to make markers on a Google Map, and then make these markers appear and disappear. The key is that you don’t need to know how the entire code works — you only need to understand a few lines out of the entire file.

Step 1. Find Code to Steal

Here is the map we’re going to use:

How did I put that in the post? If you look at the source code, you’ll see that I put the following line of code in my post:

<iframe height=’570′ width=’600′ scrolling=’NO’ src=’http://kroodsma.com/data/map.htm”></iframe>

(I am using WordPress, and I turned the rich text editor off, so that I was editing my blog in plain html).

An iframe lets you embed the contents of one website in another. I embeded the contents of kroodsma.com/data/map.htm. When you see embed text (such as for a youtube video), it’s usually an iframe. The width and height show how big the frame is in pixels. If the webpage you are embedding is bigger than that frame, than it won’t all show up in the blog.

Now, let’s take a look at the map above. Go to kroodsma.com/data/map.htm (will open in another tab).

And there’s the map! In order to make a map and put it on your page, you’re going to need access to a web server somewhere where you can upload a webpage like this one (and then use that new page to build an iframe).

Now let’s look at the source code for this map. You can use your browser to see the source code (in Firefox, select Tools –> Web Developer –>  Page Source, or Chrome, select View –> Developer –> View Source). Or, more easily, I have also saved the html file as a plain text so that you can open it in your browser. Click here to see the source file: kroodsma.com/data/map.txt.

Step 2. Find The Relevant Code

Take a look at this file. Does this source code make sense to you? If yes, great! You should see html and javascript in this file. The javascript starts with the “tag” <script …> and ends with the tag </script>, and the rest is html. But don’t worry if this page makes no sense — you don’t need to know anything except this part:

  var theMarkers = [
	 //put all of your data into this format:
	  {"name":"David",
	  "popuptext":"David is excited to be at his first NASW meeting.",
	  "type":"New",
	  "lat":37.6,
	  "lng":-122.5,
	  },
	  {"name":"Ashley",
	  "popuptext":"Ashley is a NASW veteran.",
	  "type":"Old",
	  "lat":36,
	  "lng":-78.9,
	  }
	  //you can add as many elements to this array as you like.
  ];

This is the data. Change it, and you change the markers on the map. If you change the “lat” and “lng” values, you’ll move the markers. The “type” lets you know if the people are NASW veterans or not. You can change these variables. Or you could add more markers. Let’s try adding more.

Step 3. Change and Test the Code

Ideally, you’d copy this document into your own text or code editor, and then you’d test that file on your computer (you’d need a testing server — I use MAMP for Mac) or on your personal website.

We’re going to do something simpler for this workshop. Go to jsfiddle.net. This website allows you to test snippets of code. Paste the text file into the top left box “HTML” (ignore the other boxes — also, you can grab the divider between the “HTML” box and the “javascript” box and make the HTML Box larger).

Once you paste the text, click the “run” button at the top left of the page. The webpage appear in the box on the right! It works!

Now, let’s add a data point. Go back to where the data is, and add Dianne.

var theMarkers = [
	 //put all of your data into this format:
	  {"name":"David",
	  "popuptext":"David is excited to be at his first NASW meeting.",
	  "type":"New",
	  "lat":37.6,
	  "lng":-122.5,
	  },
	  {"name":"Ashley",
	  "popuptext":"Ashley is a NASW veteran.",
	  "type":"Old",
	  "lat":36,
	  "lng":-78.9,
	  },
          {"name":"Dianne",
	  "popuptext":"Dianne has been to one previous NASW meeting.",
	  "type":"Old",
	  "lat":42.5,
	  "lng":-71,
	  }
	  //you can add as many elements to this array as you like.
  ];

 

You’ve added another point!

If you look at this code, you’ll see comments that tell you about what parts of the code do. Can you find the part that controls the size of the map? Or where the map is centered? Try to find these, change their values, and see what happens.

Step 4. Add all NASW Attendees

Now let’s say that you have all the attendees of NASW 2011 in an excel document, and you want to put them onto this map. How would you do that? You could type out each member in this format, but that would be tedious. You will have to write a script that can read in a text file and put the data in the format above. As coding goes, it’s fairly basic, but it still takes a good deal of time.

I obtained a list of attendees from the organizers. The list had every person’s home zip code, but not the latitude and longitude of those zip codes. So I Googled “zip code latitude longitude,” and found this website. I then used Google Fusion Tables to link the zip codes with latitude and longitude. I saved the spreadsheet with the latitude and longitude of each attendee as a text file, and then used a Python script to put the data in the same format as above. Here is a text file that has the data with all the attendees, ready to copy and paste into your template above: kroodsma.com/data/people_map.txt. Note that I didn’t include anyone’s names, and only their city and state, so as to respect privacy.

Here is the resulting map:

The spreadsheet I received from the meeting organizers told me if attendees had been to 0, 1, 2, or 3 or more past NASW meetings. I modified the map to add two more categories, to make this final map. In the source code, I PUT COMMENTS IN ALL CAPS to show what I changed between this map and the previous one in order to add two more categories.

And the embed code for this map is:
<iframe src=”http://kroodsma.com/data/map-all.htm” scrolling=”no” width=”570px” height=”630px”></iframe></center>

But what’s the story?

As a data journalist, of course, you’re not done. We’ve visualized the data in a new way, but I’m not sure this map exactly tells us much except that journalists come from all over the country. It appears that veterans are more likely to come from the northeast than newbies — perhaps because newbies are more likely to attend a conference if it is close to where they live, or perhaps because the “old guard” of science writers is disproportionately from the Northeast. Only actual reporting (ie socializing with other attendees) can answer these questions.