Jump to content



Recommended Posts

Textformatter for Google Maps


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


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


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:


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:

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:


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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website 😅. Thx @teppo !)
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      A simple fieldtype generating a QR Code from the public URL of the page, and more.
      Using the PHP library QR Code Generator by Kazuhiko Arase.

      In the field’s Details tab you can change between .gif or .svg formats. If you select .svg you will have the option to directly output the markup instead of a base64 image. SVG is the default.
      You can also change what is used to generate the QR code and even have several sources. The accepted sources (separated by a comma) are: httpUrl, editUrl, or the name of any text/URL/file/image field.
      If LanguageSupport is installed the compatible sources (httpUrl, text field, ...) will return as many QR codes as there are languages. Note however that when outputting on the front-end, only the languages visible to the user will be generated.
      Unformatted value
      When using $page->getUnformatted("qrcode_field") it returns an array with the following structure:
      [ [ "label" => string, // label used in the admin "qr" => string, // the qrcode image "source" => string, // the source, as defined in the configuration "text" => string // and the text used to generate the qrcode ], ... ] Formatted value
      The formatted value is an <img>/<svg> (or several right next to each other). There is no other markup.
      Should you need the same markup as in the admin you could use:
      $field = $fields->get("qrcode_field"); $field->type->markupValue($page, $field, $page->getUnformatted("qrcode_field")); But it’s a bit cumbersome, plus you need to import the FieldtypeQRCode's css/js. Best is to make your own markup using the unformatted value.
      Static QR code generator
      You can call FieldtypeQRCode::generateQRCode to generate any QR code you want. Its arguments are:
      string $text bool $svg Generate the QR code as svg instead of gif ? (default=true) bool $markup If svg, output its markup instead of a base64 ? (default=false) Hooks
      Please have a look at the source code for more details about the hookable functions.
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $page = $event->arguments("page"); $event->return = $page->title; // or could be: $event->return = "Your custom text"; }) $wire->addHookAfter("FieldtypeQRCode::generateQRCodes", function($event) { $qrcodes = $event->return; // keep everything except the QR codes generated from editUrl foreach($qrcodes as $key => &$qrcode) { if($qrcode["source"] === "editUrl") { unset($qrcodes[$key]); } } unset($qrcode); $event->return = $qrcodes; })
    • By Sebi
      AppApiFile adds the /file endpoint to the AppApi routes definition. Makes it possible to query files via the api. 
      This module relies on the base module AppApi, which must be installed before AppApiFile can do its work.
      You can access all files that are uploaded at any ProcessWire page. Call api/file/route/in/pagetree?file=test.jpg to access a page via its route in the page tree. Alternatively you can call api/file/4242?file=test.jpg (e.g.,) to access a page by its id. The module will make sure that the page is accessible by the active user.
      The GET-param "file" defines the basename of the file which you want to get.
      The following GET-params (optional) can be used to manipulate an image:
      width height maxwidth maxheight cropX cropY Use GET-Param format=base64 to receive the file in base64 format.
    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.

      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

  • Create New...