BBCode to Embed a Google Map (Moderate Complexity)

Get help with installation and running phpBB 3.0.x here. Please do not post bug reports, feature requests, or MOD-related questions here.
Suggested Hosts
Forum rules
END OF SUPPORT: 1 January 2017 (announcement)
Spaatz
Registered User
Posts: 52
Joined: Mon Aug 27, 2007 11:15 am
Location: Paris, France

BBCode to Embed a Google Map (Moderate Complexity)

Post by Spaatz »

Hello Everyone,

Well, I got bored today and I developed a way of embedding Google Maps via BBCode. It isn't the easiest for forum users to use and it certainly isn't very fun but, it works. I am able to embed Google Maps and private Google Maps using the code provided in the Link to This Page link on the Google Maps pages. If you embed a private map with Polygons, markers and other information, it will embed that too.

I find it useful on my site because people report catches when they go recreationally shrimping. I am able to demarcate zones they can shrimp in and they can show each other where they were one evening.

Here is how I did it:

BBCode Usage:

Code: Select all

[GMap={TEXT1}]{TEXT2}[/GMap]
HTML Replacement:

Code: Select all

<iframe width="600" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{TEXT1}"></iframe><br /><small><a href="{TEXT2}" style="color:#0000FF;text-align:left">View Larger Map</a></small>
User Steps to Embed a Map:

1.) User locates a Google Map they want to share in street map, satellite or hybrid view.

2.) User clicks the link at the top right of the map labeled Link to this Page.

3.) User copies code from the "Paste HTML to Embed in Your Website" section.

4.) User pastes code into Notepad. Example:

Code: Select all

<iframe width="600" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&s=AARTsJoZ6Y0oDSHTURlNO5F6KKDQy5Z27g&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
6.) User extracts two "hyperlinks" from the code by deleting everything outside of the parentheses in the code. They can do this by searching for a " using Notepad and then copying all the content between each set.

In the above example, here are the two "hyperlinks."

Code: Select all

http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&s=AARTsJoZ6Y0oDSHTURlNO5F6KKDQy5Z27g&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&output=embed
and

Code: Select all

http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&source=embed
7.) User clicks Edit - Replace inside of notepad.

User populates the Find field with this code:

Code: Select all

&
and the Replace field with this code:

Code: Select all

&
User Clicks Replace All (This is to change the encoded Ampersand's (&) into un-encoded Ampersands. If you do not do this step, the eventual iframe will not be able to locate the server.

8.) User goes to the message they are drafting and Clicks the BBCode "GMap=". It places some code on the page that looks like this:

Code: Select all

[GMap=][/GMap]
9.) User copies the first hyperlink from Notepad and pastes it directly after the = sign, immediately before the closing bracket ].

Code: Select all

[GMap=RIGHT HERE!!!][/GMap]
10.) User copies the second hyperlink and pastes it immediately after that same bracket ].

Code: Select all

[GMap=]RIGHT HERE!!![/GMap]
If all goes as planned, they should have a bunch of stuff on your screen that looks close to this:

Code: Select all

[gmap=http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&s=AARTsJoZ6Y0oDSHTURlNO5F6KKDQy5Z27g&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&output=embed]http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=h&msa=0&msid=102369817357771866956.000438dc3e296bb79b7d7&ll=27.673799,-82.696495&spn=0.152024,0.205994&z=12&source=embed[/gmap]
11.) Click preview and test it out. You should see a Google Map displayed in the post. I have it fully operational on my own forum but it is a membership based forum and I really don't feel like opening it up to the world for this BBCode.

Let me know if you have any questions or know how to make this easier! If this is the wrong section, sorry about that. It looked like the right one. Any help moving it to the right place would be appreciated.
User avatar
rhythm1
Registered User
Posts: 950
Joined: Sat May 10, 2008 9:23 pm
Location: Maldives

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by rhythm1 »

There is a sticky for BBcodes on this forum, try it there :)
`Rhythm
I 'd rather live in a world with PHPBB
Where we stand and where we siT - Shit is bound to be always therE
SixReasons
Registered User
Posts: 80
Joined: Sat Jul 19, 2008 3:09 pm

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by SixReasons »

wow this seems a little hard for users...

where is step 5?
Son of a Beach
Registered User
Posts: 294
Joined: Fri Sep 07, 2007 1:36 am
Location: Tasmania
Contact:

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by Son of a Beach »

Embedding Google Maps in phpBB3 using only BBCode (ie, without a mod/hack), is really tedious for the user. However, I've managed to get it a little simpler than what is detailed above (just a little). The user only needs to specify the first URL not two URLs...

BBCode Usage:

Code: Select all

[map]{URL}[/map]
HTML Replacement:

Code: Select all

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{URL}"></iframe><br /><small><a href="{URL}&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
Unfortunately, the user still has to manually replace all instances of "&" with "&" (Ie, Delete all occurrences of "amp;") within the URL. But at least this way they only have to fiddle with one URL.

I noticed that the two URLs were very similar, and that the extra data in the second URL is the same for all instances, so you can just use the first URL, and in the place where the second URL should be, you can append the standard data that should always be there for those second URLs to the first URL. There will be a bit of redundant data from the first URL that is unecessary, but that doesn't cause any problems.

I'd be keen to find out if anyone has found an easier way to do this (easier for the user, that is) without having to use a mod/hack.
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by guyskankrye »

What if I just want to embed a location? Like this for example:

http://maps.google.com/maps?f=q&hl=en&g ... 13&iwloc=A

I noticed when I put this in it didn't appear properly on the page.
User avatar
DonkeyBike
Registered User
Posts: 75
Joined: Sun Sep 16, 2007 1:20 am

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by DonkeyBike »

Probably a stupid question, but why not just "iFrame" the Google Map ? ?

I just did and it's very handy.

Image
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 5871
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by thecoalman »

If you using simple I-Frame code I'd suggest removing it. Pages in Iframes could contain malicious code and you have no control over what is being linked too.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by guyskankrye »

Nevermind!
niko4ever
Registered User
Posts: 4
Joined: Sun Oct 18, 2009 8:30 am

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by niko4ever »

thanks man, work for me, works also for route from one place to another :)

I have also a question. How can i change the bb code to set the default map
type as 'Earth' while creating the map in a thread ?
User avatar
nuworld
Registered User
Posts: 339
Joined: Sat Oct 17, 2009 8:28 pm

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by nuworld »

I did this awhile back and this is much easier and faster.

http://www.phpbb.com/community/viewtopi ... 5&start=15
User avatar
samlemine
Registered User
Posts: 28
Joined: Fri Oct 23, 2009 6:50 am
Name: SidAhmed Ahmedou

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by samlemine »

Hello

Thank you somuch its fine but i use it with only the fist coke and its kowking

[gmap=http://maps.google.com/maps?f=q&source= ... tput=embed][/gmap]

Regards
hunteroriginal
Registered User
Posts: 73
Joined: Fri Jul 09, 2010 2:11 am

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by hunteroriginal »

Here's my form, a little more user friendly:

Code: Select all

[gmap]{SIMPLETEXT}[/gmap]

Code: Select all

<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?near={SIMPLETEXT}&output=embed"></iframe><br /><small><a href="http://maps.google.com/?near={SIMPLETEXT}" style="color:#0000FF;text-align:left">View Larger Map</a> (Note: map locations are approximate)</small>
Usage: [gmap]Approximate Location / Address[/gmap]

This will return an approximate location marker for a string search, like an address. :)
Calman
Registered User
Posts: 339
Joined: Sat Jul 12, 2008 1:01 am
Location: Okanagan Valley, Canada
Contact:

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by Calman »

PLEASE HELP!!!

I am desperately trying to get my version to work, using Google Maps "Customize and preview embedded map" (as I would like a specific street level zoom and custom width height) ... this part is easy, but sorting out a BBCode for posting on forum is another story!!

Okay, so here is what I tried:

BBCode usage:
[Map]{SIMPLETEXT}[/Map]

HTML replacement:
<iframe width="660" height="320" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps?f=q&source={ ... "></iframe>

So, once clicking on "Map" tab on a post, I insert specific location code:
s_q&hl=en&geocode=&q=edna,+penticton&sll=49.891235,-97.15369&sspn=25.555055,55.458984&ie=UTF8&hq=&hnear=Edna+Ave,+Penticton,+Okanagan-Similkameen+Regional+District,+British+Columbia&t=h&ll=49.488019,-119.583006&spn=0.004879,0.00912&z=16&iwloc=A&output=embed

Where am I going wrong friends?

Kind Regards,
Cal :)
Visiting, Researching or Relocating to the Okanagan Valley in BC?
http://www.okanaganforum.com
Calman
Registered User
Posts: 339
Joined: Sat Jul 12, 2008 1:01 am
Location: Okanagan Valley, Canada
Contact:

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by Calman »

Hope I explained the above clearly?

Regards,
Cal :)
Visiting, Researching or Relocating to the Okanagan Valley in BC?
http://www.okanaganforum.com
User avatar
ric323
Former Team Member
Posts: 22910
Joined: Tue Feb 06, 2007 12:33 am
Location: Melbourne, Australia
Name: Ric
Contact:

Re: BBCode to Embed a Google Map (Moderate Complexity)

Post by ric323 »

SIMPLETEXT does not allow some of the punctuation symbols required by that full Google URL.
If you are logged in to Google, you can enable some of the new features of Google Maps, including "short" URLs.
They look like this: http://goo.gl/maps/d53A
(That link will show the Melbourne Cricket Ground at a specific zoom level.)
The Knowledge Base contains solutions to many common problems!
How to fix "Doesn't have a default value" and "Incorrect string value: xxx for column 'post_text' " errors.
How to do a clean re-install of the latest phpBB3 version.
Problems with permissions? Read phpBB3 Permissions
Locked

Return to “[3.0.x] Support Forum”