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]

i just make a BBcode with Google MAP and work :

Oppo R15 | PortalHoy

Oppo R15: Características, precio y opiniones. Toda la información y mejores ofertas para comprar el Oppo R15. Características Oppo R15 General Redes 2G: GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2 3G: HSDPA 850 / 900 / 1900 / 2100 4G/LTE Precio 400 Colores Rojo y negro. Memorias Memoria...

portalhoy.com

 

[AndreaMarucci]

just make a BBcode

Wow thank you. It's possible to have it?

Just a question from the thread you linked. Why the map isn't 100% width? It's a choice?

 

[Yodrak]

You can make your own Bbcode. Go to

/admin.php?bb-codes/

And create a New Bbcode with this settings:



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.

 

[adnanbcn]

just add some css, check now.
.mapa{text-align: center; width: 100%;}
.mapa iframe{width: 100%;}

 

[adnanbcn]

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

But if you want to use only for a single place just copy iframe link and paste in BBcode "HTML replacement".

 

[AndreaMarucci]

Beautiful! Thank all I'm just trying now...

 

[AndreaMarucci]

if you want to use only for a single place

Yes that's my idea. Can you be more specific? Sorry but I've never done a BBCode

 

[adnanbcn]

1: Add new BBcode ( Tag: map Title: Google Map)
2: add this en html replacement

<div class="map">
{option}
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d78331.21700858096!2d2.112822484705789!3d41.399267142731354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49816718e30e5%3A0x44b0fb3d4f47660a!2sBarcelona!5e0!3m2!1sen!2ses!4v1543527954048" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>   
    </div>

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

3: Save

4: Go to post where you want to use the Map and just call [MAP]Barcelona Map[/MAP]

 

[AndreaMarucci]

you need also a GoogleMaps API key

Yes but where do I insert the API key?

 

[adnanbcn]

<iframe src="https://www.google.com/maps/embed?p...2sBarcelona!5e0!3m2!1sen!2ses!4v1543527954048" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> change this code as you need.

 

[adnanbcn]

Yes but where do I insert the API key?

Not need API KEY

 

[AndreaMarucci]

just call [MAP]Barcelona Map[/MAP]

Ok just got it what you meant but it's not what I need sorry. What I'd like is to paste a map embed url or a map url like this

https://www.google.it/maps/place/Four+Points+by+Sheraton+Milan+Center/@45.484962,9.1960823,17z/data=!4m6!3m5!1s0x4786c6ce188a5b8f:0xeee4d6ca75b1c355!4b1!8m2!3d45.484962!4d9.198271

and have it rendered as a map on the message... The link can change obviously

 

[adnanbcn]

Add this iframe for "Four Points by Sheraton Milan Center"

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2797.2474275521736!2d9.1960823!3d45.484962!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786c6ce188a5b8f%3A0xeee4d6ca75b1c355!2sFour+Points+by+Sheraton+Milan+Center!5e0!3m2!1ses!2ses!4v1543529763215" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

[Yodrak]

Yes but where do I insert the API key?

My fault. You dont need a API key for this.

 

[adnanbcn]

Check the place you tell me showing as a map:

Oppo R15 | PortalHoy

Oppo R15: Características, precio y opiniones. Toda la información y mejores ofertas para comprar el Oppo R15. Características Oppo R15 General Redes 2G: GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2 3G: HSDPA 850 / 900 / 1900 / 2100 4G/LTE Precio 400 Colores Rojo y negro. Memorias Memoria...

portalhoy.com

 

[adnanbcn]

Four Points by Sheraton Milan Center · Via Gerolamo Cardano, 1, 20124 Milano MI, Italy

★★★★☆ · Hotel

www.google.it

This is place url not iframe

 

[AndreaMarucci]

Sorry for my bad english adnanbcn. I don't want to create a BBCode that hold just a single place but a BBCode that show a map using the parameters in the url pasted in a message.

 

[AndreaMarucci]

You dont need

I get this connection refused by www.google.com with this

[googlemap]https://www.google.it/maps/place/Four+Points+by+Sheraton+Milan+Center/@45.484962,9.1960823,17z/data=!4m6!3m5!1s0x4786c6ce188a5b8f:0xeee4d6ca75b1c355!4b1!8m2!3d45.484962!4d9.198271[/googlemap]

 

[adnanbcn]

[googlemap]https://www.google.it/maps/place/Fo...55!4b1!8m2!3d45.484962!4d9.198271[/googlemap]

This is place url not iframe.