Using a Google Maps Gadget in Google Sites
I’m working on a Google Site for a group I belong to, and it’s been an uneven experience. The user experience for general editing is quite good, but things get very hairy very quickly when you try to insert “gadgets” onto the page. I assumed that adding, for example, a Google Map to a page would be trivial, but working with the official Map Gadget was frustrating as there was no help documentation on how to populate the “data source URL” field.
I finally dug deep enough to turn up the answer. The Google Map gadget was intended to work with Google Spreadsheets. To get a map on your Google Site showing your map content, here’s what you do:
- Create a spreadsheet in Google Docs.
- In the first column of the spreadsheet, type in the address as you would search for it in Google Maps. Full street addresses seem to work quite reliably.
- In the second column, enter some text that describes the item–this becomes the tooltip for the marker on the map. Repeat for as many items as you like, making sure not to skip rows.
- For debugging, I like to add a Map Gadget to the spreadsheet to check my data. Tell it to use Sheet!A1:B10 (or however many rows you have) and to use the last column for tooltips, then Apply and Close.
- Verify that the map looks right, then click the map so the title bar is showing, click the little menu in the upper right hand corner of the gadget, and choose Get Query Data Source URL. Choose Entire Sheet and select and copy the resulting URL to the clipboard.
- In your Google Site, edit the page you want to put the map on.
- Insert a map gadget into the page using the Gadget browser. Fill in the fields, pasting the URL you copied in step 5 into the Data Source URL field, and checking the option to use the last column for tooltips.
- Save your changes to the page and behold: a map with markers for all your attractions.
This gives you a pretty basic map view with control over the markers, the height and width of the displayed map, and tooltips. For more advanced map control (street view vs. satellite, zoom level, etc.) I think you’d have to embed raw calls to the API, but I’d be thrilled to be proven wrong.
Hello,
Nice solution, works well… provided you are member of the group.
I’ll try to make this simple gadget visible from the whole web but it’s seems to be impossible. I have try to replace the data query URL pointing to googledocs with the URL obtained after publishing th edoc in the web :
Your document is viewable at:
http://spreadsheets.google.com/pub?key=ppUVLbhkPQ_G7TruQ6EVtJw
From a browser it works, but as a query URL within the tool, no way :-((
But thank you for the trick
Thank you VERY much for this tutorial as i have been looking into this solution for months. Your contribution to the web community is greatly appreciated.
I’ve been having the same problem that end users get a need to sign in error: there is a workaround. First, do all as described above, including getting the data source URL. Load this URL up in your browser as per normal, and you’ll see that it dumps out a bunch of JavaScript like:
google.visualization.Query.setResponse({requestId:’0′,status:’ok’,signature:’4648419300596197257′,table:{cols: [{id:'A',label:'',type:'t',pattern:''},{id:'B',label:'',type:'t',pattern:''}],rows: [[{v:'First cell'},{v:'Second cell'}]]}});
Copy that into a static text file hosted on your webserver (e.g. www/mapsquerydata.txt) and then use that url as the data source url in the gadget. Will work fine after that.
mg’s suggestion worked for me although I struggled for a while to work out how to “Copy that into a static text file hosted on your webserver”. Here’s what I did in the end:
created a plain text file on my computer with the “google.visualization…..” stuff in it and nothing else. I then attached that to my Sites page. Now right click on the link to your attachment and “Copy link location”. This can be used as your source URL for the Map gadget. I had to remove stuff in the link after (and including) the question mark.
I take that last post back - it doesn’t work.
I also experienced the “not signed in” problem…
What worked for me was publishing the worksheet including the gadget and embed that into the Google Site.
Just hide the data columns, tweak the size until it fits just right and your set.
This way you keep the gadget up-2-date through your spreadsheet publishing.
What worked for me was publishing the entire spreadsheet (incl. gadget) and embed that in my Google site.
Just hide the data columns and resize the first cell to fit your gadget… et voila!
It requires signing in. Not work.
My solutions for now is to have my map on a separate page made through Google Pages. Yes. It will only work for a while before Google Pages is removed.
If someone knows how to do it and works fine, please let me know. THANKS.
Thanks a lot for this post!
Regarding the “not signed in” problem that some folks have been having: you can solve it as follows:
1) Go to your spreadsheet’s “sharing” tab
2) Check box that reads “Anyone can view this document WITHOUT LOGGING IN”
How do you”Insert a map gadget into the page using the Gadget browser”
On the edit mode of the specific page on google sites the “insets” menu does not contain Gadgets Browser.
Am I looking in the wrong place for this to insert my URL of the spreadsheet ??
Thanks
Sorry, should have been more specific. I should have said, Use the Inserts menu, go down to the bottom of the Gadgets section, and then select More…. This brings up the Gadgets browser.
excellent solution. Thanks!
howto make my markers different color?