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?
Is ther a syntax that would allow to insert Latitude and Longitude instead of destination ????
You can use coordinates divided by coma instead of street address.
I have spent a long time trying to figure this map gagdet out. You helped. Mucho gracias!
Hello
3 ways to integrate a Google Maps within a Google SItes page
http://sites.google.com/site/annuairevin/integrating-google-maps
Nice tip, it’s much more elegant than some of the other approaches I’ve seen.
Thanks, that’s very helpful. Does anyone know how to embed a newline in a tooltip? Both \r and \n work while hovering, but not for the “clicked” balloon. Thanks in advance.
@Jerry, just a guess, but I’d try “” incase html is filtered that was: open-triangular-bracket br close-triangular bracket
You are a star! Thank you this was very frustrating.
Lovely “how to”, but I found a solution to the “user not signed in” problem, special notes for users with own or custom domain. You do not need to follow “mg’s” method which may be difficult other.
See http://i-tech-tips.blogspot.com/2009/05/solution-for-user-not-signed-in-using.html
Well done everyone for your great work!
Regards,
Agbebiyi B.A
one problem is google map URL is too long to remember and paste, and i found an useful link for google maps might worth to mention, these sites are for shorten long map URL into short URL and is very easy to remember, http://www.LocationMap.org and http://www.LocationMap.biz for shops, offices, factories maps.
Spent all day Sunday trying to resolve this “simple” problem. (Much, much easier to do this in Blogger.)
Very good suggestion – will have to work with Google Docs more often for workarounds.
Thanks again,
Hi Guys,
I can’t get it working on my site. I’m using my own domain with Google Apps Premier Edition.
I followed steps in this tutorial, but I can’t see the map on my site.
I changed the permissions of spreadsehhet, so everyone can see the doc without sogning in.
The map shows correctly there.
BUT, when I try to insert the map into a Google Site using Dataconnector gadget it fails, saying that the page cannot be found and the URL is pointing somewhere to googleopensocial.
More here:
http://www.google.com/support/forum/p/sites/thread?tid=220bb29c962b09fe&fid=220bb29c962b09fe00046afa2ac4906d&hl=en
If you have any other suggestion, let me know! Thanks!
hi,
im trying to edit the pop up for the locations i put on the map… I would like to edit it so i can have a link in there. any help would be greatly appreciated. thanks
Does anyone know how to get a gadget map that was created with a Docs spreadsheet to display in the regular Google Maps My Maps area?
If this isn’t possible, it seems like a huge omission on Google’s part… Thoughts?
Cut corners with Google maps for low quality mapping. How tight must a business be to use Google ?
The directions suck and the accuracy is poor. People use them out out convenience as its certainly not quality. The customisation is weak and there enterprise programme is a rip off for what minimal functions you get !
Thank you for good and concise directions! However, steps 5 and 7 seem to need updating. (Maybe Google Sites functionality has changed since you wrote your text? At least I cannot find any “Gadget browser”, and the default Map gadget has no “Data Source URL” to use.)
I would rewrite the last sentence of step 5 and the entire step 7 to read like this:
5. [...] Choose Gadget (not Entire Sheet!) and select and copy the resulting URL to the clipboard.
7. Insert a special map gadget (not the ordinary one) into the page by using “Insert > More gadgets…” In the “Setup your gadget” dialog, choose “Add gadget by URL” and enter this URL: http://www.google.com/ig/modules/map.xml. (I found that URL by choosing “Get gadget XML” from the map’s dropdown menu in the spreadsheet.) Now you are presented with a “Setup your gadget” dialog that contains the “Data source URL (required)” setting we need. There, paste the data source URL from step 5.