XF 1.1 Saved Google Maps BB Code

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:
http://maps.google.com/maps?q=40.64...&sspn=0.07305,0.075617&vpsrc=6&gl=us&t=m&z=15

and iframe:
Code:
<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:
http://maps.google.com/maps/ms?msid=214533597045798101523.0004ab3207d5084c73710&msa=0

and iframe:
Code:
<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.
 
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.
 
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:
Code:
http://maps.google.com/maps/ms?msid={$id}&msa=0

Embed HTML:
Code:
<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:
http://maps.google.com/maps/ms?msid=214533597045798101523.0004993496ba6ce6cff49&msa=0

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

http://xenforo.com/community/threads/cel-editor-button-management.19991/page-2#post-316852

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.
 
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.
 
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:
http://www.sloweurope.com/community/threads/how-to-embed-a-google-map-in-a-thread.99/

Very nice!!!
 
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?
https://www.google.co.uk/maps/place...2!3m1!1s0x47d9036f13048767:0x5e47e8e609bddd80

needs to look similar to this:
http://maps.google.com/maps/ms?msid=214533597045798101523.0004993496ba6ce6cff49&msa=0

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.

Thanks!!
 
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:
http://www.sloweurope.com/community/threads/how-to-embed-a-google-map-in-a-thread.99/

Very nice!!!
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:
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:
Code:
<iframe src="https://www.google.com/maps/embed?pb={$id}" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Hope that helps.
 
I got it working by copying the new "embedded map" URL option on Google maps
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.
 
Top Bottom