Do you want to try it out at first?
If you wan to give it a try at first simply click on this link.
How does it work?
Its actually pretty simple. Any Google Spreadsheet that is published on the internet can be queried in different formats (standard HTML, XML and JSON). By using the $.getJSON() Function we can get all the entries that are inside the our Google spreadsheet. The last step is to reformat the JSON Data a bit and to create a new WorldMap that is displaying our Markers.
Need more description? Simply follow these few easy steps:
1. Create a new Google Spreadsheet and insert some Data
For this example I’ve set up three columns (country, Latitude and Longitude) and inserted a few rows with some random data. I would recommend to keep the structure of the spreadsheet as in the image below, as you otherwise might run into a few problems (Part 3).
2. Publish the Spreadsheet and retrieve your Spreadsheet ID
The next step is that we have to publish our spreadsheet. You can do this by going to File -> Publish to the web.
A dialog similar to this window should then appear.
Copy the link from the TextBox and hit the publish button, the button should then change its text to published (like shown in the image above).
Your published Url will look similar to this:
The portion that we care about is everything that comes after /spreadsheets/d/ in my example 1pKlJmR28U53uU9uOHtqm8w2EOya8XW37jtACjDYXShc . This part is called the SpreadsheetID.
3. Copy this Code and adjust it to your needs
var url ='https://spreadsheets.google.com/feeds/list/1pKlJmR28U53uU9uOHtqm8w2EOya8XW37jtACjDYXShc/od6/public/basic?alt=json';
var url ='https://spreadsheets.google.com/feeds/list/InsertYourSpreadsheetID/od6/public/basic?alt=json';
4. Test it!
This is the final step! Open up your favourite browser and check if everything is working as expeceted. If anything is working properly you will end up with an view similar to this.
If this post was useful for you feel free to share and like it! If you have any questions or if you simply want to share your results feel free to comment below.