How To Insert A Google Map Into A Thread & Post On Xenforo

GTR-Admin

Administrator
Staff member
Mar 22, 2016
181
99
28
Thailand
Google Maps in Threads & Posts on Xenforo


Option 1: from Google Drive

Works with the existing BB Media Sites "Google Drive" code and requires no editing.

Getting a Google Map to display on the forums has been a source of frustration for a long time. I had NO idea you could achieve it via Google Drive until it was demonstrated by Kevin P on the Top 10 Motorcycling Roads in North Thailand thread;

I've actually spent hours and hours trying to find a workable Xenforo add-on app, with no success - other than the GPX Viewer app.

Instructions for adding a Google Map from Google Drive into Xenforo:
Note: an "image" snapshot of the map displays initially, in a new window, but clicking the "Open with Google My Maps" opens a full interactive map window.

1.) Create the map in Google "My Maps" and set it as "public" access.
2.) use the Insert / Media option in the menu, and select "Google Drive"

google-embed-media.jpg


3.) Your Google Drive page opens - locate the map you want to share and "right-click" on it...

g-drive-share.jpg




5.) Copy the "Link to Share" URL and paste that into the "Enter Media URL" in the thread or post you are editing
6.) Click the "Insert" button

That's it...


Option 2: Google My Maps


Note: this is a full-width interactive Google map, but it requires creation of a new BB Code in the Media Codes add-on app for Xenforo. Instructions for that are included at the end, for other Xenforo forum admins.

[format=h3]Instruction for inserting a Google My Map into a Post[/format]

1.) Use the Insert / Media option in the menu, and select "Google My Maps"


4-paste-link-google-my-map.jpg


2.) That opens your Google My Maps page

2-google-my-maps-list.jpg


3.) Click on the Map you want to insert to open it

4.) At right of the map name, click the "triple vertical dots" menu icon

5.)Click on "Embed on my site" option from the menu

6.) Copy the Embed this map code

3-embed-google-my-map.jpg



7.) Revert to the Thread or Post where you want to insert the map

8.) Paste in the Embed Code and click the "Insert" button

5-insert-map.jpg



Example: Mae Um Long Hot Springs Map, Mae Sariang




[format=h2]Adding a new "Google Maps" BB Media Code in a Xenforo 1.5x Forum[/format]

The URL structure may well vary depending on what kind of map you are trying to display, so the following BB CODE is specifically for My Maps that have been saved and shared as "public" access...

After a lot of searching for forum BBCODE MAP examples and much trial and error, I finally got it to work as follows;

Media Site ID: map
Site Title: Google Maps
Site URL:
Code:
https://www.google.com/maps/d/
Match URLs:
Code:
google.com/maps/d/embed?mid={$id}
Embed HTML:
Code:
<iframe src="https://www.google.com/maps/d/embed?mid={$id}" width="100%" height="450"></iframe>
 

Attachments

  • 1-google-my-maps-insert.jpg
    1-google-my-maps-insert.jpg
    96.8 KB · Views: 196
Last edited:

GTR-Admin

Administrator
Staff member
Mar 22, 2016
181
99
28
Thailand
Yes, and there are now two solutions to a long-term problem...
  • Option 1 from Google Drive: the initial display in the thread or post is a snapshot "image" of the Map. At top centre, click the "Open with Google My Maps" link to display the full interactive map
  • Option 2: My Maps will work for previously saved maps that have public access set.
I am damned if I know why the Xenforo forum software developers can't provide a proper mechanism for "embedding" a full map directly into a thread or post. For example, in the same way YouTube videos are easily inserted, for example. In this day and age, given the global reliance on Google Maps for so many things, its makes no sense to me.

Adding a general map - as you'd have if you searched for a location / hotel / landmark etc, requires different BB Code parameters but I will have a play with that next...
 

Peeto

Ol'Timer
Jun 21, 2016
54
8
8
64
Pattaya
can't provide a proper mechanism for "embedding" a full map directly into a thread or post.

The problem is Google change the output (link) mechanism from time to time.

At my forum I solved it (for now) with BB code media site.

Here is what I did.
Screenshot_20180812-005224.jpg


Screenshot_20180812-005802.jpg


With this solution you need only to post the link and is converted into an embedded image.
 

GTR-Admin

Administrator
Staff member
Mar 22, 2016
181
99
28
Thailand
[format=h2]Google Maps[/format]

Thanks Peeto

I could not get your code example to work for previously saved Google My Maps. The goo.gl URL is the issue there - the problem being twofold;
  1. "My Maps" are located in
    Code:
    https://google.com/maps/d/
  2. Google's URL shortener is being phased out from March 2018 and will end completely by March 2019.
However, I eventually figured out a solution, that is now included in the original post in the top of this Thread.
 
Last edited:

Peeto

Ol'Timer
Jun 21, 2016
54
8
8
64
Pattaya
My media site is more for a general map.

So if you search in Google map for a city, a street or a hotel Google will give you this link for sharing.

They changed the format already some times in the past.

I am working on a solution to post just coordinates and have it displayed as a map.

All this give me already some Grey hairs.