Jump to content

TextformatterGoogleMaps


teppo
 Share

Recommended Posts

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..)

post-175-0-99735800-1371998265_thumb.png

  • Like 14
Link to comment
Share on other sites

  • 4 months later...

@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 :)

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 3 months later...
  • 2 weeks later...

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 :)

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

@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>
Link to comment
Share on other sites

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) ???

 

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

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?

Link to comment
Share on other sites

  • 10 months later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...