Now that the semester has finished, you may have some “free” time to play with your mapping and web-design skills. While we have discussed the 2012 Election maps and held trainings for TileMill and Crowdmap in the past, the best-known internet mapping platform continues to be Google Maps. These maps are not only really useful for directions or to play Fantasy Job Search, they are also highly customizable and easy-to-share. Here are two ways to share your Google Map with friends:
1. Customize and share your map via Google. The easiest way to share your custom maps is via Google itself. First, on the main screen, click on My Places. Then “Create Map.” Add your title and description, and Click “Done.” Now click the “Edit” button, where you can draw lines, polygons, and mark places.
Now you can share with your friends, who can add their own markers / lines / polygons. Just click Collaborate after you’re done editing, and enter the emails of your collaborators (remember to turn on “Allow anyone to edit this map”). So now when you are planning your birthday pub crawl, you can ask for input from your friends! Or you can take suggestions for good restaurants along a certain route. All sorts of possibilities for this easy-to-use platform.
Finally, while we are discussing the features of Google Maps, if you are not already familiar with the cool Maps Labs, check them out (see map below to find the link on the main page):
2. Embed your map in a website. This one is a bit more complex, but it can also be a lot more useful to have an embedded map in your personal website. For our purposes, we will use the Columbia webspace we created for free. First, you should open this link in a separate tab/window to follow along. You will need a Google Map API; this can be done by following the first instructions in the above link. Got your API yet? Great! Now you need to do some HTML / javascript editing. For this you can use any text editor, but I would recommend either Sublime Text or Notepad Plus Plus. You can basically copy the text from the Google Developers site, making sure to include your API key and “True” or “False” in this statement: src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE“>
Now, how far do you want to take your map? You can use custom layers, have users mark locations or create polygons, whatever you like! Here are some samples [check their code using your browser’s Developer Tools or Firebug for Firefox]. Before you know it, you will have a fancy bit of code you can display on your website! Here is one example with the ability to draw polygons, and this one is made from a Formhub output and a Google Fusion Table!
And remember, CodeAcademy and other resources are great for learning Java and HTML languages!