MIGX and Google maps

89 Posts

geordiechris Reply #1, 9 years, 2 months ago

Hi Folks

Yet another saga ensues.
I'm attempting to add a simple, no frills, very low use, google map as a MIGX associated tv.
The idea is that the client creates a list of venues that include venue name, address etc plus a simple google map locator;
they would locate their google map and then paste in the resulting embeddable iframe code into the MIGX 'map' field.
But I just keep hitting a brick wall.
I've read around the subject, but it seems there are so many variables and pitfalls, I'm at a loss as to what the best (or simply workable)
solution might be.
For starters, the iframe appears at odds with MODX.
For example, what might the best input type be to accept an iframe?
I read 'textarea' was the way to go, but no dice.
I have tried separating the 'map' tv from MIGX, but even that fails.
Using a Google Key is also non starter on a local environment (couldn't even get that working remotely).
I'm dabbling with the 'Google Maps TV' extra at the moment, without success.

Just to get me on the right track and save me even more hours heading hopefully off down cul-de-sacs,
has anyone come across this before or indeed added this feature to a site?

Many thanks

My setup:
MODX latest (2.5.7)
MAMP (latest (3.0.7.3))
PHP (5.6.10)
MySQL (5.5.38)
Chrome: Std and Canary (latest versions)
MacOS Sierra 10.12.5

5,888 Posts

Bruno17 Reply #2, 9 years, 2 months ago

I read 'textarea' was the way to go, but no dice.

I'm not sure to understand your issue.
Can't you just put the iframe-code into the MIGX - textarea - field?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

89 Posts

geordiechris Reply #3, 9 years, 2 months ago

Yes, I've tried that Bruno.
I've also tried "inputTV":"google_map" and "inputTVtype":"textarea"
When I hard code the iframe it works without a problem;
i.e. simply placing the raw iframe tag in the resource content area.

If I use [[*google_map]] (cached or uncached) the first map in the grid displays ok,
but is simply repeated in every new venue entry (despite there obviously being a different map in each entry).
This, I understand, is the expected behaviour of the standalone tv * token.
When I use the correct MIGX method of placeholders i.e. [[+google_map]],
it simply gets stripped out completely...and in the console I get a load of Google permissions stuff;

Google Maps API error: RefererNotAllowedMapError

and with reference to my local dev setup...

Your site URL to be authorized:

All of the other associated MIGX tv's (venue name, address etc)
work fine...
Have you seen this before?

89 Posts

geordiechris Reply #4, 9 years, 2 months ago

Anyone?

5,888 Posts

Bruno17 Reply #5, 9 years, 2 months ago

what is the code exactly, which you are trying to put into the textarea?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

89 Posts

geordiechris Reply #6, 9 years, 2 months ago

Hi Bruno

just a straightforward Google map iframe...
i.e.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.414568275994!2d-2.5427499480764744!3d51.450544472578784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48718fabf9bdcd47%3A0x75b0be2adcdcbdba!2sRipon+Rd%2C+Bristol+BS4+4BT!5e0!3m2!1sen!2suk!4v1502378057167" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

this is the MIGX form tab...
[
{"caption":"VENUE INFO", "fields": [
{"field":"venue_name", "caption":"Venue", "inputTV":"venue_name"},
{"field":"address_1", "caption":"Address", "inputTV":"address"},
{"field":"post_code", "caption":"Post Code", "inputTV":"post_code"},
{"field":"phone_1", "caption":"Phone", "inputTV":"phone"},
{"field":"venue_info", "caption":"Information", "inputTV":"venue_info"},
{"field":"map", "caption":"Map", "inputTV":"google_map"}
]
}
]

this is the chunkTpl...


<article>   
        <div class="row">
            
            <h2>[[+venue_name]]</h2>

          <div>
              <address> 
                  <p>[[+address]]</p>
                  <p>[[+post_code]]</p>
              </address>
                <p>[[+phone]]</p>      
          </div>
          
        <div>
            [[+venue_info]]
        </div>

        <div class="map-wrapper">
            [[+google_map]]
        </div>

</article>

As I say, when I detach the 'google_map' tv from the MIGX tv and just use it as a standalone tv, it displays fine.
But doing it that way I'm unable to add a different map for each unique venue.

Please ignore that stuff about the Google permissions stuff;
I'd inadvertently left an incorrect API Key in the footer js.

Many thanks

89 Posts

geordiechris Reply #7, 9 years, 2 months ago

Can anyone help me with this?
I have ported the test site onto a remote server thinking that MAMP may be the problem.
Fruitless.
I then approached my host who have looked at Modsec and could find no collisions.
It most certainly looks like a MIGX issue.
I'm at an impasse...

5,888 Posts

Bruno17 Reply #8, 9 years, 2 months ago

working fine for me
http://www.revo222.webcmsolutions.de/75/migxlayoutboxes.html

but I don't use any inputTVs I'm using inputTVtypes like:

[
{"caption":"VENUE INFO", "fields": [ 
{"field":"venue_name", "caption":"Venue", "inputTVtype":"text"}, 
{"field":"address_1", "caption":"Address", "inputTVtype":"text"},
{"field":"post_code", "caption":"Post Code", "inputTVtype":"text"},
{"field":"phone_1", "caption":"Phone", "inputTVtype":"text"}, 
{"field":"venue_info", "caption":"Information", "inputTVtype":"textarea"},
{"field":"map", "caption":"Map", "inputTVtype":"textarea"} 
]
}
]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

89 Posts

geordiechris Reply #9, 9 years, 2 months ago

Absolutely Bruno.
Have tried all this.

just to recap,
my minimal MIGX TV is as follows...

name: venue_migx

[
  {"caption":"VENUE INFO", "fields": [   
    {"field":"venue_name", "caption":"Venue", "inputTVtype":"text"},       
    {"field":"map", "caption":"Map", "inputTVtype":"textarea"}         
    ]
  }
]

[ 
  {"header": "Venue", "dataIndex":"venue_name"},
  {"header": "Map", "dataIndex":"map"}
]

The Tpl chunk is a follows...

name: venueTpl

<article class="row">

    <div class="column large-6">
        <h2 class="venue-name">[[+venue_name]]</h2>
    </div>
          
    <div class="column large-6 map-wrapper">
        [[+google_map]]
    </div>
        
</article>

and the call...

    <div class="row">
	  	[[!getImageList?
                    &tvname=`venue_migx`
                    &tpl=`venueTpl`
                ]]
    </div>

There are no console errors.
When inspected, the div that should contain the map is simply empty.
As I say, a standalone TV with a type of textarea accepts an iframe and displays without a problem.
I can no longer see the wood for the trees here...

89 Posts

geordiechris Reply #10, 9 years, 2 months ago

What an idiot!
I've just spotted my deliberate mistake Bruno.
I shall bother you no further sir

Thanks once again for your valuable time