Page 1 of 2

BBCode to Embed a Google Map (Moderate Complexity)

Posted: Wed Jun 04, 2008 7:58 pm
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.

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

Posted: Wed Jun 04, 2008 9:19 pm
by rhythm1
There is a sticky for BBcodes on this forum, try it there :)

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

Posted: Thu Jul 24, 2008 2:31 pm
by SixReasons
wow this seems a little hard for users...

where is step 5?

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

Posted: Mon Sep 08, 2008 12:37 am
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.

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

Posted: Tue Sep 16, 2008 5:55 pm
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.

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

Posted: Tue Sep 16, 2008 11:05 pm
by DonkeyBike
Probably a stupid question, but why not just "iFrame" the Google Map ? ?

I just did and it's very handy.

Image

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

Posted: Wed Sep 17, 2008 12:25 am
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.

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

Posted: Wed Sep 17, 2008 1:52 pm
by guyskankrye
Nevermind!

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

Posted: Fri May 14, 2010 4:38 pm
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 ?

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

Posted: Fri May 14, 2010 5:04 pm
by nuworld
I did this awhile back and this is much easier and faster.

http://www.phpbb.com/community/viewtopi ... 5&start=15

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

Posted: Thu May 20, 2010 9:36 am
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

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

Posted: Mon Aug 02, 2010 7:22 pm
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. :)

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

Posted: Thu Oct 14, 2010 9:54 pm
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 :)

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

Posted: Fri Oct 15, 2010 1:39 am
by Calman
Hope I explained the above clearly?

Regards,
Cal :)

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

Posted: Fri Oct 15, 2010 4:29 am
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.)