How do I get started making a custom map for a website?

January 24, 2011 1:52 PM

I want to make a website with a map on it. I have no idea what I'm doing. Where should I start?

The website will show the locations of... let's say, really good sandwiches. You go to the website and there's a map of the world there, with pins marking locations. You click on a pin and it shows you more information about the particular sandwich found at that spot.

Also on the website would be a list of great sandwiches, sorted by country. You can click on a link there and the relevant information box would open on the map.

Here are some maps doing the sort of thing I want to do:

Hugh's Fish Fight
Travel Journals
Britain's Best Budget Restaurants

I'm doing this a hobby, both because I love sandwiches and for the mental exercise. I don't know how to do any coding. For now I'll be the only person updating the map, but I like the idea of eventually letting other sandwich-lovers add pins.


Q: Is "My Maps" on Google Maps the best way to do this? Will it let me do both parts to the page (not just the map, but also the list of countries)?

Q: Should I learn about the Google API? If so, where do I begin? The information on the Google Code pages is aimed at someone with more experience than I have.

Q: Any other Custom Maps 101 advice?

posted by The corpse in the library to Computers & Internet (5 answers total)

You can do this with the Google API - but you need to know Javascript. The quickest way to learn is to find an existing map and see how they do it by looking at the code source - there's one here at Metafilter Jobs, for example.
posted by Paragon at 1:58 PM on January 24, 2011

Really easy to do with Bing maps. Look at the documentation here, and select "Import data into shape layers" then "Add a GeoRSS layer".

Source code is provided - cut and paste that into your site. Then create your own GeoRSS formatted .xml file to define all of the points of interest.

For your list, you will have to tie together some map navigation, which isn't that much harder (see "Control the map").
posted by Diddly at 2:04 PM on January 24, 2011

The source code of the page doesn't necessarily help. On one website I inject the data by XML generated with PHP from the database. The Google documentation and basic examples are decent, but if you have no experience with coding, going that route may be over your head. Some other sites such as gpsvisualizer.com/geocoder/ it's even less obvious. A site I'm working on right now is along similar lines to what you want, but it's hand-coded.
posted by hungrysquirrels at 2:09 PM on January 24, 2011

This is really easy to do with MyMaps on google maps. You add the locations to your maps with pins, enter descriptions, photos etc, and pull the embed code and put it on your website. The country part might be tricky -- you might have to create a map for each country. The bigger the map area, the less useful the map is at first glance because you can't really tell where the pins are without zooming in or clicking on them.

I've mefi-mailed you an example that I made for my work website.
posted by Kimberly at 2:11 PM on January 24, 2011

You can use the Google Spreadsheet + Google Maps mashup called Spreadsheet Mapper 2.0. There's a good introduction video on that page.

I use it to make the map then I grab the embed link and put it on my site.
Example here.
posted by sleepytako at 4:57 PM on January 24, 2011 [2 favorites]