Jump to content
teppo

TextformatterGoogleMaps

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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. :)

Share this post


Link to post
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

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By adrian
      Tracy Debugger for ProcessWire
      The ultimate “swiss army knife” debugging and development tool for the ProcessWire CMF/CMS

       
      Integrates and extends Nette's Tracy debugging tool and adds 35+ custom tools designed for effective ProcessWire debugging and lightning fast development
      The most comprehensive set of instructions and examples is available at: https://adrianbj.github.io/TracyDebugger
      Modules Directory: http://modules.processwire.com/modules/tracy-debugger/
      Github: https://github.com/adrianbj/TracyDebugger
      A big thanks to @tpr for introducing me to Tracy and for the idea for this module and for significant feedback, testing, and feature suggestions.
    • By adrian
      This module allows you to automatically rename file (including image) uploads according to a configurable format
      This module lets you define as many rules as you need to determine how uploaded files will be named and you can have different rules for different pages, templates, fields, and file extensions, or one rule for all uploads. Renaming works for files uploaded via the admin interface and also via the API, including images added from remote URLs.   Github: https://github.com/adrianbj/CustomUploadNames
      Modules Directory: http://modules.processwire.com/modules/process-custom-upload-names/
      Renaming Rules
      The module config allows you to set an unlimited number of Rename Rules. You can define rules to specific fields, templates, pages, and file extensions. If a rule option is left blank, the rule with be applied to all fields/templates/pages/extensions. Leave Filename Format blank to prevent renaming for a specific field/template/page combo, overriding a more general rule. Rules are processed in order, so put more specific rules before more general ones. You can drag to change the order of rules as needed. The following variables can be used in the filename format: $page, $template, $field, and $file. For some of these (eg. $field->description), if they haven't been filled out and saved prior to uploading the image, renaming won't occur on upload, but will happen on page save (could be an issue if image has already been inserted into RTE/HTML field before page save). Some examples: $page->title mysite-{$template->name}-images $field->label $file->description {$page->name}-{$file->filesize}-kb prefix-[Y-m-d_H-i-s]-suffix (anything inside square brackets is is considered to be a PHP date format for the current date/time) randstring[n] (where n is the number of characters you want in the string) ### (custom number mask, eg. 001 if more than one image with same name on a page. This is an enhanced version of the automatic addition of numbers if required) If 'Rename on Save' is checked files will be renamed again each time a page is saved (admin or front-end via API). WARNING: this setting will break any direct links to the old filename, which is particularly relevant for images inserted into RTE/HTML fields. The Filename Format can be defined using plain text and PW $page variable, for example: mysite-{$page->path} You can preserve the uploaded filename for certain rules. This will allow you to set a general renaming rule for your entire site, but then add a rule for a specific page/template/field that does not rename the uploaded file. Just simply build the rule, but leave the Filename Format field empty. You can specify an optional character limit (to nearest whole word) for the length of the filename - useful if you are using $page->path, $path->name etc and have very long page names - eg. news articles, publication titles etc. NOTE - if you are using ProcessWire's webp features, be sure to use the useSrcExt because if you have jpg and png files on the same page and your rename rules result in the same name, you need to maintain the src extension so they are kept as separate files.
      $config->webpOptions = array(     'useSrcExt' => false, // Use source file extension in webp filename? (file.jpg.webp rather than file.webp) ); Acknowledgments
      The module config settings make use of code from Pete's EmailToPage module and the renaming function is based on this code from Ryan: http://processwire.com/talk/topic/3299-ability-to-define-convention-for-image-and-file-upload-names/?p=32623 (also see this post for his thoughts on file renaming and why it is the lazy way out - worth a read before deciding to use this module). 
       
       
      NOTE:
      This should not be needed on most sites, but I work with lots of sites that host PDFs and photos/vectors that are available for download and I have always renamed the files on upload because clients will often upload files with horrible meaningless filenames like:
      Final ReportV6 web version for John Feb 23.PDF

×
×
  • Create New...