XF 2.0 How to embed a google map

[AndreaMarucci]

Searched the forum but I've not found a solution.

It seems that there's a BBCode that support google map but if I paste a Map url or an Embed url in the media add, I always get the same error "The specified URL cannot be embedded as media." so I'm asking here if someone has ever embedded a Map in a post and how.

Thanks!

 

[adnanbcn]

Wait i send you a vídeo.

 

[AndreaMarucci]

not iframe

If I put this

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2797.2474285898993!2d9.196082314920222!3d45.48496197910117!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786c6ce188a5b8f%3A0xeee4d6ca75b1c355!2sFour+Points+by+Sheraton+Milan+Center!5e0!3m2!1sit!2sit!4v1543530371259" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

it's the same

 

[AndreaMarucci]

I think I need something like

<div class="map">
{option}
<iframe src="https://www.google.com/maps/embed?SOMEVARIABLESHEREPASSEDBYTHEPASTE></iframe>   
    </div>

<style>.map{text-align: center; width: 100%;}
.map iframe{width: 100%;}</style>

 

[adnanbcn]

i add 10 diferente places and work for me.

 

[AndreaMarucci]

I've made it!!!

This is the paste in the message

[googlemap]!1m18!1m12!1m3!1d2797.2474285898993!2d9.196082314920222!3d45.48496197910117!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786c6ce188a5b8f%3A0xeee4d6ca75b1c355!2sFour+Points+by+Sheraton+Milan+Center!5e0!3m2!1sit!2sit!4v1543530371259[/googlemap]

And this is the replacement

<div align="center" style="margin: 5px 5px 5px 5px;">
     <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%">
          <tr>
               <td class="thead" style="text-align:center"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb={text}&output=embed"></iframe></td>
          </tr>
     </table>
</div>

 

[adnanbcn]

I've made it!!!

This is the paste in the message

[googlemap]!1m18!1m12!1m3!1d2797.2474285898993!2d9.196082314920222!3d45.48496197910117!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786c6ce188a5b8f%3A0xeee4d6ca75b1c355!2sFour+Points+by+Sheraton+Milan+Center!5e0!3m2!1sit!2sit!4v1543530371259[/googlemap]

And this is the replacement

<div align="center" style="margin: 5px 5px 5px 5px;">
     <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%">
          <tr>
               <td class="thead" style="text-align:center"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb={text}&output=embed"></iframe></td>
          </tr>
     </table>
</div>

i just upload a video in XF media but a big file if i see i give you the video link

 

[tourmeister]

You can make your own Bbcode. Go to

/admin.php?bb-codes/

And create a New Bbcode with this settings:

View attachment 189397

And in the HTML Replacement you paste this:

<div align="center" style="margin: 5px 5px 5px 5px;">
     <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%">
          <tr>
               <td class="thead" style="text-align:center"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q={text}&output=embed"></iframe></td>
          </tr>
     </table>
</div>

For this GOOGLEMAP Bbcode you need also a GoogleMaps API key wich you can get in the Google Developer Tools.

If I have a GoogleMaps API, how to I use it with this code?

 

[Yodrak]

If I have a GoogleMaps API, how to I use it with this code?

Sorry i have made a mistake. You don´t need a GoogleMaps API for this html snippet.

 

[tourmeister]

The link at the bottom of this post

AUSTIN: - Jan 12 Bacon Breakfast Ride

Do you like Bacon? Or Sausage? If you have never been to the Green Sausage House outside of Temple Texas than you're missing a great place to eat. They serve an outstanding breakfast. This place is so good that Trip Advisor rates it as the number 4 restaurant in Temple and it is like 20+ miles...

www.twtex.com

Is what I want to be able to embed, hopefully with BBcode.

Many of my users want to be able to create routes in Google map and then share them in their posts. Can this be done with custom BBcode and will that application need an API?

 

[tourmeister]

I've made it!!!

This is the paste in the message

[googlemap]!1m18!1m12!1m3!1d2797.2474285898993!2d9.196082314920222!3d45.48496197910117!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786c6ce188a5b8f%3A0xeee4d6ca75b1c355!2sFour+Points+by+Sheraton+Milan+Center!5e0!3m2!1sit!2sit!4v1543530371259[/googlemap]

And this is the replacement

<div align="center" style="margin: 5px 5px 5px 5px;">
     <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%">
          <tr>
               <td class="thead" style="text-align:center"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb={text}&output=embed"></iframe></td>
          </tr>
     </table>
</div>

So this worked.

Is there a way to do it without my users having to cut all the iframe stuff of the front and end of the string that is needed between the BBcode tags?

 

[tourmeister]

Here it is in action for anyone that is interested.

How to embed a Google map in your message

Lots of folks like to share Google maps. I think we now have a solution, but it will take a little effort on the part of the users to make it work because it is not idiot proof... :wary: :-P I found a way to create a custom BBcode for embedding Google maps. It is actually very easy to use. Go...

www.twtex.com

 

[tourmeister]

So there is a slight issue with this method for embedding Google maps,

Explanation of how to get around the issue

How to embed a Google map in your message

Lots of folks like to share Google maps. I think we now have a solution, but it will take a little effort on the part of the users to make it work because it is not idiot proof... :wary: :-P I found a way to create a custom BBcode for embedding Google maps. It is actually very easy to use. Go...

www.twtex.com

Since it does not use an API, you apparently cannot link to a map that is actually locating a specific "place", like a business.

 

[tourmeister]

So this method of embedding does not work for maps like this,

East Texas 450 with fuel stops - Google My Maps

East Texas 450 with fuel stops

www.google.com

Any idea why or how to fix it?

 

[haincha]

This is working for me. Thanks!