Can Google Maps be embedded into Topics?


(Hrishikesh Thakre) #1

I found the article at Google Maps — Support — WordPress.com for WordPress integration, but as iframe is disabled , it’s not embedded only link appears. Any plans for supporting it?


(Jeff Atwood) #2

I think Google Maps urls should onebox, yes. @zogstrip can you put that on your list for this week?

Both the shortened and full Google Maps urls should onebox.


(Régis Hanol) #3

Here you go

http://goo.gl/maps/X2pD7

It only works with classic Google Maps urls though (either shortened or full). Couldn’t find a way to make it work with the newer version.


[Solved]: Need a developer for several Discourse projects / customization
(Jeff Atwood) #4

How about this?

https://www.google.com/maps/preview#!q=Four+Corners+Monument&data=!1m4!1m3!1d80316!2d-109.0673305!3d37.0075041!4m15!2m14!1m13!1s0x0%3A0x10c8d2d89aa51bbb!3m8!1m3!1d80316!2d-109.0673305!3d37.0075041!3m2!1i1097!2i605!4f13.1!4m2!3d36.9991253!4d-109.045229

Or this?

Hmm, I can’t even tell how to get the correct URLs? Can you describe it?


(Régis Hanol) #5

Just pushed a fix to whitelist Google Maps iframes

Here’s an example of an iframe


OpenStreet maps embedding
(David García-Navas) #6

This is awesome!

As this feature works perfect (also in our installation) and there is a plugin to embed Google Calendar too, could i suppose that Discourse would work with Google Drive spreadsheets too?

It would be fantastic to embed a spreadsheet so people on a topic could fill data or answer a form :smiley:


Embed Google Spreadsheet plugin
(Camille Roux) #14

You could maybe support http://embed.ly/ to increase the number content providers easily. By default, the current onebox will be used, but if the admin defined a Embedly key, Embedly will be used instead.


(Michael Downey) #15

Can anyone else confirm whether or not this is working, now that Google have switched everyone over to the “new” maps?

I can get old short links to render correctly still, but the new shortlinks generated just leave a giant whitespace.


(Jeff Atwood) #17

Works – you just have to choose “share and embed map” from the bottom right of Google Maps, the gear icon:

then “Embed” and paste it in:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6303.092992820802!2d-122.37108705!3d37.824090149999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085803331bebaf1%3A0xe3769b59396caad9!2sTreasure+Island%2C+San+Francisco%2C+CA!5e0!3m2!1sen!2sus!4v1405105095879" width="600" height="450" frameborder="0" style="border:0"></iframe>

Plain unadorned Google Maps Share URLs will not work, we don’t know how to generate the embed from just the URL.


(Kris) #18

Google does have a fairly simple embed API which someone could probably whip up a plug-in for; options would have to be set on a site-to-site basis.


(etewiah) #19

I have been working for a few weeks now on a plugin that treats a google map as an item in a conversation. This means each marker you add to the map is stored in a table and associated with the topic. I have found that this opens up an amazing range of interesting things that you can do with a topic. You can see it in action here:

http://klavado.com

The source code is available here:

WARNING: This is very much a proof of concept at this stage. I am not very proud of the code (I’m actually a bit embarrassed by it ) but I figured I might as well share it to get feedback and suggestions. It really will not be a good idea to deploy it to a production environment.

Over the next few weeks I hope to get the chance to improve it significantly. In the meantime, any feedback will be greatly appreciated.


Sectioned discourse - an experiment
(Bart) #28

I just tested a direct link to a Google Maps view on Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed (as recommended on the embed admin page), and it worked just fine. Does this mean we should be able to embed them in posts by just pasting in the URL? I couldn’t get this to work, also not after whitelisting google.com.


(Jeff Atwood) #29

Did you follow these instructions above?


(Bart) #30

I did and it works fine. However, it goes against the general workfow of embedding media in Discourse and requires additional explanation which is a shame. My point was that iframely seems to be handle to handle the direct links and turn them into embeds, hence my question if it couldn’t work in Discourse too.

As the embed page suggests testing on iframely, it suggested to me that this is the mechanism you use for embeds?


(Jeff Atwood) #31

Looking at this…

https://www.google.com/maps/place/Fresno,+CA/@36.7855335,-119.7945615,12z/data=!3m1!4b1!4m2!3m1!1s0x80945de1549e4e9d:0x7b12406449a3b811

in Iframely URL Debugger - Open Graph, Twitter Cards, oEmbed … hmm I just noticed they have a “canonical” Google Maps URL version of this:

https://maps.google.com/maps?sll=36.7855335,-119.7945615&sspn=0.2111927,0.3516286&cid=8868221415722301457&q=Fresno,+CA&output=classic&dg=ntvb

it is unclear to me how they synthesize this “canonical” URL from the above original URL. Can you tell us how they do that? Is there a formula somewhere?


(Jens Maier) #32

You get the canonical URL straight from Google:

C:\Users\Jens>telnet www.google.com 80
GET /maps/place/Fresno,+CA/@36.7855335,-119.7945615,12z/data=!3m1!4b1!4m2!3m1!1s0x80945de1549e4e9d:0x7b12406449a3b811 HTTP/1.1
Host: www.google.com

HTTP/1.1 302 Found
Location: http://maps.google.com/maps?sll=36.7855335,-119.7945615&sspn=0.2111927,0.3516286&cid=8868221415722301457&q=Fresno,+CA&output=classic&dg=ntvb

(Bart) #33

Wow, how did you learn about THAT?! Seems promising.


(Jens Maier) #34

Blind luck and experimentation. :wink:
Also, iframely mentioned a canonical URI and webservers are supposed to redirect useragents to a resource’s canonical URI rather than serving the same resource under several different URLs.


(Jens Maier) #35

I went ahead and implemented this in the onebox gem:

Test post:

https://www.google.de/maps/@48.3932366,9.992333,663a,20y,41.43t/data=!3m1!1e3

Result:


(Jens Maier) #38

Fixed:

https://github.com/discourse/onebox/pull/289

Unfortunately, the URL does not contain enough data to create a placeholder map. While the map will get embedded just fine after submitting a post, it will appear as a nondescript icon in the composer preview: