How to embed Google Maps

Open to everyone

Moderator: Chip

Post Reply
User avatar
pat
Site Admin
Posts: 2266
Joined: Wed Jun 22, 2005 11:04 am

How to embed Google Maps

Post by pat »

One of the things that's really bothered me about the recent versions of this forum software is that they removed the ability to embed Google maps. This is a real hindrance for a group such as ours that depends so heavily on maps.

I found a way to embed the maps. It's not for the computer illiterate, but it does work. All maps displayed will be 600px x 500px. Author your map to those specs. Here are the instructions, written by the author:

http://www.phpbb.com/community/viewtopic.php?t=994405

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&amp;hl=en&amp;t=h&amp;s=AARTsJoZ6Y0oDSHTURlNO5F6KKDQy5Z27g&amp;msa=0&amp;msid=102369817357771866956.000438dc3e296bb79b7d7&amp;ll=27.673799,-82.696495&amp;spn=0.152024,0.205994&amp;z=12&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;t=h&amp;msa=0&amp;msid=102369817357771866956.000438dc3e296bb79b7d7&amp;ll=27.673799,-82.696495&amp;spn=0.152024,0.205994&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>


5.) 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&amp;hl=en&amp;t=h&amp;s=AARTsJoZ6Y0oDSHTURlNO5F6KKDQy5Z27g&amp;msa=0&amp;msid=102369817357771866956.000438dc3e296bb79b7d7&amp;ll=27.673799,-82.696495&amp;spn=0.152024,0.205994&amp;z=12&amp;output=embed

and

Code: Select all

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

6.) User clicks Edit - Replace inside of notepad.

User populates the Find field with this code:

Code: Select all

&amp;

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.

7.) 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]

8.) 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]

9.) 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]


10.) Click preview and test it out. You should see a Google Map displayed in the post.



View Larger Map
Image Impex Currituck
Pat Traynor - site admin
pat@ssih.com
Post Reply