TextformatterGoogleMaps

[teppo]

Textformatter for Google Maps

https://github.com/teppokoivula/TextformatterGoogleMaps

This module looks for Google Maps URLs (such as https://maps.google.fi/maps?safe=off&ie=UTF-8&q=disneyland,+paris) within paragraph (<p></p>) HTML tags and automatically converts them to embedded maps. Configurable options include embed type ("static" or "iframe"), API key, responsive embedding and Google Maps for Business settings. Other than that, it's pretty basic stuff.

Original regexp for grabbing maps links was posted by Ryan (I believe) here on the forums, but I couldn't find that post anymore. I've altered it to better suit the needs of this module, added some configurable features (part of which, such as makeResponsive() method, are again based on Ryan's TextformatterVideoEmbed module) and so on.

Hope someone finds it useful.

(By the way: if you're going to use Google Maps for Business settings, please read the notes there carefully. Google doesn't exactly recommend storing your private key the way module settings are stored..)

[adamspruijt]

Oh man, I love this idea, installing!

[NooseLadder]

What's the  difference between using this module and just embedding the Google Maps code into a fielsd of type = textarea?

[teppo]

@NooseLadder: this module makes it easy for users to embed maps within content generated with RTE -- TinyMCE, CKEditor etc. Use cases are very different.

Just for the record, aforementioned editors do provide a way to edit markup directly, so technically it would also be possible to embed iframes etc. this way. That's something we don't usually want users to do because it often causes more problems than solves. It's better to provide simple solution that outputs consistent markup instead of giving end users too much freedom to do (and break) whatever they want.

Added bonus (when compared to embedding iframes directly) is that if you (or Google) ever decide to change how maps should be embedded, you'll only need to change the code once (in the module) instead of changing it everywhere it's been embedded

[NooseLadder]

@teppo. Thanks for your reply. Yes I can see the benefits of that. I haven't used Google Maps much but probably will in the future. You said if Google decide to change how they display maps, well I guess they have. Does your module support Google Maps Javascript API v3?

 

[Joss]

HI Teppo

Just installed this on PW dev using CKEditor and it is not working. I am using it with default settings and posting in the normal map address.

All it is outputting is the address in text. It is within <p> tags.

Any ideas?

Joss

[Martijn Geerts]

Never used this module and maybe this is a unnecessary answer/question: Did you add the Textformatter to the field ?

[Joss]

Yep, sure did

[teppo]

Joss: is the URL inside that <p> tag plain text or a link? CKEditor has the habit of creating links automagically. If it's a link, try making it plain text and see if it works then. That's probably the most typical issue with both this module and some other textformatters.

Another thing you should make sure is whether any other textformatters are placed before this one. Conflicting textformatters is quite a common issue too. Ones placed after this one shouldn't matter, but it depends a lot on what they're doing..

If the issue is neither of those, I'll try to take a closer look at this soon. In that case a short excerpt from your final source (output) would be helpful, i.e. to make sure that it's not something weird related to tabs, spaces etc.

[Joss]

Hi Teppo

I have had to leap over to Ryans module for the moment, just so I could get the site up. But I will see if I can test with your suggestions somehow.

I had already checked whether it was a link, and it was okay - it just seems like it was not reading the field somehow and not doing anything other than printing out the URL wrapped in a <p> tag.

Thanks mate

[teppo]

Joss: if you have the time, it would be helpful if you could post the URL you used -- it's always possible that regexp is missing something. This module needs some improvements (in more than one front) soon, and it'd be great to sort out any existing bugs first

[Joss]

Hi Teppo, not completely sure since I changed what I did, but I think it was:

https://www.google.co.uk/maps/preview#!q=3+Third+Avenue%2C+Victory+Court%2C+Bletchley%2C+Milton+Keynes+MK1+1EW&data=!4m15!2m14!1m13!1s0x4876553b7cb2cb95%3A0x169f00ba52fb4893!3m8!1m3!1d5938539!2d-2.3278149!3d52.8382005!3m2!1i1680!2i924!4f13.1!4m2!3d52.0036453!4d-0.7359115

[Soma]

I tried this module and it doesn't seem to recognize the maps url something like

https://www.google.ch/maps/place/update+AG/@47.365041,8.54861,19z/data=!3m1!4b1!4m2!3m1!1s0x479aa753249cb503:0xe71b3c15f4ffcb1c

[Soma]

Ah just see the google maps urls have changed since then, so no chance to get this working.

[teppo]

Thanks for mentioning this, Soma. Looks like I'll have to take a closer look at the new format.

[Hani]

Yup - the new URL structure for maps doesn't work with the module but I was able to get it working by manually building the URL.  For example, this is the simple structure I used:

https://maps.google.com/maps?q=Santa+Barbara+CA+93101

That seems to work just fine - even in CKEditor.    My guess is that Google will continue to support that URL structure for quite a while.  They've typically been pretty good at backwards compatibility and not implementing new methods that break old URLs.

[teppo]

As a quick heads-up I've just updated the module (twice, as it turned out that Joss' problem was related to certain regexp not expecting .co.uk TLDs..) and it should now work with the new Google Maps URL format.

The problem is that this new format is more difficult to work with than earlier one, so I'm doing some ugly tricks (such as relying on old maps URLs) to keep things working. This is not a good solution in the long term, which is why an extensive rewrite of this module is going to be required soon, unless there's some solution I just haven't thought about yet.

I've added a new checkbox to module config, titled "use coordinates". If this is checked, new maps URLs will be embedded based on coordinates, which is accurate but also replaces place name with those same coordinates. If it's not checked, location name will be used instead, which is far less accurate and for Finnish place names, for an example, practically didn't work at all.

Like @Hani pointed out above, old Maps URLs still work -- which is a very good thing, since at least it means that old content should (for the time being) remain intact

[kixe]

doesn't work
https://www.google.com/maps/place/The+Great+Pyramid+at+Giza/@29.9797402,31.1351772,17z

[teppo]

@kixe: are you using the latest version of this module? Could you make sure that the Google Maps URL is properly embedded, i.e. on it's own paragraph in a field with this textformatter enabled, not really a link, etc.? Are there any other textformatters before/after this one?

I can't seem to reproduce your issue: http://www.flamingruby.com/blog/testing-google-maps/. This is what the "view source" mode (in the RTE) for the main column of that page looks like:

<p>https://www.google.com/maps/place/The+Great+Pyramid+at+Giza/@29.9797402,31.1351772,17z</p>

[Martijn Geerts]

Something to do with the pyramid, as most people think the Giza pyramid has 4 sides, it actually has 8.

That's the probable cause of the issue

[kixe]

very silly! switching around with fields I tested in a field with diabled textformatter. Everything works as expected.

@Martijn: finally 9 because it has a flat rooftop. But you are right to use PW it is necessary to be able to count until 8 (or maybe 9)

 

[doolak]

Hi there,

I am trying to show the static map linked with the Google Maps page? Is there a possibility to include the content of the CKEditor field (which contains that link) unformatted but still use the formatted code for the map?

So it should be shown like this:

<a class='map' href='https://www.google.de/maps/place/XYZCompany/@53.17363,8.94532,17z/data=!3m1!4b1!4m2!3m1!1s0x47baaf1431b6b1cd:0x8672b17350e41d9c' target='_blank'>
<img style='max-width:100%;height:auto' width='200' height='200' src='//maps.googleapis.com/maps/api/staticmap?sensor=false&center=loc:52.17363,9.94532&markers=loc:53.17363,8.94532&size=200x200' alt='' /></a>

Is there an option to show the unformatted content for the link and the formatted content for the map?

[doolak]

Found a solution - FieldtypeConcat worked fine for this. 

[doolak]

Hi, it's me again...

 

Strangewise after having used the module for a long time I am having now a little problem with the generated URLs.

The output encodes the URL Parameter to &amp; - Maybe this was the same all the time, but now Google returns an error:

https://maps.googleapis.com/maps/api/staticmap?sensor=false&amp;center=loc:47.8528818,12.3630332&amp;markers=loc:47.8528818,12.3630332&amp;size=240x200

Does anybody have an idea how to fix this?

[doolak]

So it seems to be CKEditor which produces the problem - tried to set  config.forceSimpleAmpersand in CKEditors config.js, but no success.  Any idea?