1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.1 Saved Google Maps BB Code

Discussion in 'XenForo Questions and Support' started by ibenick, Jan 21, 2012.

  1. ibenick

    ibenick Active Member

    I've found a handful of threads on the forum about embedding a google map into a thread but can't find one that addresses it how I intend. I've seen this in action on a vBulletin forum and I would like to be able to duplicate the functionality.

    There are two separate codes, one for embedding a standard google map and one for a saved google map. On the vBulletin site I've seen this on, all you need to do is paste the link to the map in between the respective bbcode, either [MAP] or [SAVEDMAP] and it displays in the post.

    Example link for the standard map:

    and iframe:
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=40.641377,-110.82231&amp;hl=en&amp;sll=40.663092,-110.873839&amp;sspn=0.07305,0.075617&amp;vpsrc=0&amp;gl=us&amp;t=m&amp;ie=UTF8&amp;z=14&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?q=40.641377,-110.82231&amp;hl=en&amp;sll=40.663092,-110.873839&amp;sspn=0.07305,0.075617&amp;vpsrc=0&amp;gl=us&amp;t=m&amp;ie=UTF8&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    And example link for a saved map:

    and iframe:
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=214533597045798101523.0004ab3207d5084c73710&amp;hl=en&amp;ie=UTF8&amp;t=p&amp;vpsrc=1&amp;ll=37.539531,-113.161448&amp;spn=0.007198,0.028985&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?msa=0&amp;msid=214533597045798101523.0004ab3207d5084c73710&amp;hl=en&amp;ie=UTF8&amp;t=p&amp;vpsrc=1&amp;ll=37.539531,-113.161448&amp;spn=0.007198,0.028985&amp;source=embed" style="color:#0000FF;text-align:left">Kanarra Creek Map - Backcountrypost.com</a> in a larger map</small>
    Is there something already out there that can make this happen with BB Code in XenForo? I tried to tweak the google map code that works off coordinates from Brogan but had no success.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This should be possible by creating a media site:

    Admin CP -> Home -> BB Code Media Sites

    But because the iframe takes the long URL, and because the media site system won't accept all of the parameters from the long URL, you will need to use a callback function (PHP programming). You can probably use the "saved" URL or the "short" URL in the media site. The URL matching can extract the id from those URLs. Then your callback function will need to request that page and somehow obtain the long URL. Then you can build the embed code using the long URL.

    This requires coding ability and some extra effort.
  3. ibenick

    ibenick Active Member

    Success! I was able to create a new BB Code Media Site to embed the saved google maps.

    Here is what I did:

    Media Site ID: savedmap
    Site Title: Saved Map
    Site URL: http://maps.google.com/

    Match URLs:
    Embed HTML:
    <iframe width="700" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid={$id}&amp;ie=UTF8&amp;t=p&amp;vpsrc=0&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?msa=0&amp;msid={$id}&amp;ie=UTF8&amp;t=p&amp;vpsrc=0&amp;source=embed" text-align:left">View larger map.</a></small>
    The user then just has to paste the basic link from their saved google map like this:

    And the map will embed in the post.

    Now I just need to figure out how to add a button for this in the post editor...
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Ah. I tested that saved URL with the iframe but it didn't work. I think I didn't include "output=embed" though.

    All of the media sites use the media icon:

    Screen shot 2012-01-22 at 5.07.03 PM.png
  5. ibenick

    ibenick Active Member

    That sucks. I would really like to have a button for saved maps [savedmap] and regular google maps [map] as my site is oriented towards the outdoors, trip planning and trip reports. A similar vBulletin site has it setup like that and it seems to work really well. I tried creating new buttons with the Cel Button Editor add on:


    But I can't for the life of me figure out how to actually create the new button. I can tell where to insert the name of the new button into the editor template but no clue as to actually specify that the button should apply a certain BB Code to whatever is pasted. Hell, if I could even duplicate the Media button but change the icon so users would associate it with maps, that would be a big victory.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  7. ArnyVee

    ArnyVee Well-Known Member

  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  9. ArnyVee

    ArnyVee Well-Known Member

  10. Jim Giles

    Jim Giles Member

    I would like to embed a google map image or mapquest image in my forum thread. Is there a simple way to do this without php, code, technical expertise?

    A simple way. If there is not, there should be.
  11. PaulineK

    PaulineK Member

    The way ibenick described above worked for me, with a slight change in the google maps URL format for their new way of doing maps.

    Site URL: https://mapsengine.google.com/
    Match URLs: https://mapsengine.google.com/map/edit?mid={$id}
    Embed HTML: <iframe src="https://mapsengine.google.com/map/embed?mid={$id}" width="800" height="600"></iframe>

    And, you don't need a custom button - click the MEDIA button, enter the URL and you see the map.

    I also found that just pasting in the URL triggers the Media action and shows the map. Demo at this link:

    Very nice!!!
  12. Adamantium

    Adamantium New Member

    So I have had a play and can create the BB Code as ibenick has done and can get the Google Map to embed fine. I used his Google Link too!

    Now how for example do I change this random location to the same format as his?

    needs to look similar to this:

    Looks like Google has changed it's ways of doing URLs

    I have tried the same way as Pauline but would rather not use the Google Engine as that would be quite complex for my users.

  13. AndyB

    AndyB Well-Known Member

    adwade likes this.
  14. avalon-ua

    avalon-ua Active Member

    Hi! Thank you for such useful information. All works, but I would like to get separate maps with every plase, now I am able only use general maps with many places... Google map allows generate such links (https://maps.google.com/maps/place?q=ул. Дмитрия Бортнянского, 50, Львов, Львовская область, Украина&ie=UTF8&ftid=0x473add9a170f3565:0x2a98fe84f055a06c) but sadly it doesn't work when I insert link to my page...
    Last edited: Jul 27, 2014
  15. avalon-ua

    avalon-ua Active Member

    Mouth likes this.
  16. Fjrgremlin

    Fjrgremlin New Member

    It's been a while and the Google URLs and have changed again. I got it working by copying the new "embedded map" URL option on Google maps with the following settings:

    Media Site ID: googlemap
    Site Title: Google Map
    Site URL: http://www.google.com/
    Match URLs: https://www.google.com/maps/embed?pb={$id}
    Embeded HTML:
    <iframe src="https://www.google.com/maps/embed?pb={$id}" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    Hope that helps.
    Mouth and Jake Bunce like this.
  17. Mouth

    Mouth Well-Known Member

    Where do I find this new usage/functionality?

    For example, I visit this maps link, click the hamburger menu in the top-left, choose the 'Share or embed map' link, and the URL options are either a share link that isn't recognised or a URL within an iframe. The share link being recognised as a bbcode would be ideal, as the URL within an iframe is too complex to expect users to be able to utilise, as they have to copy the right url code and paste into bb code.

Share This Page