Embedding Google Maps in your posts [Archive]

View Full Version : Embedding Google Maps in your posts

Alex

November 20th, 2008, 02:01 PM

Lets say you are submitting a post/thread that you want to include a link to a Google map, we now have the abilitiy to embed these maps directly into your post. This FAQ explains how to do this.

To embed a Google Map follow these steps:

Go to Google Maps and find the location or route you want to show. Click the "link" hyperlink at the top right:

http://www.smugmug.com/photos/421163372_HTcQw-L.jpg

Then click the "customize and preview embedded map" link:

http://www.smugmug.com/photos/421163375_c3hJZ-L.jpg

Change the map to Large at the top, then zoom in/out and scroll until you're happy with how the map appears:

http://www.smugmug.com/photos/421163373_5CoPX-L.jpg

When you're done, select all and copy all of the text that appears in the "Paste HTML to embed in website" section.

Now go back to your post here and just hit this icon --> 59 and it will automatically type the gmap bbcode in your post, just like the link tool or the image tool.

[gmap]the text you copied from Google Maps[gmap]

Paste in the text you copied from google maps, and submit your post.

All this gives you this:

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=san+francisco,+ca&aq=&sll=37.339386,-121.894956&sspn=0.501699,1.056747&ie=UTF8&hq=&hnear=San+Francisco,+California&t= h&ll=37.775057,-122.419281&spn=0.130257,0.219727&z=12&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=san+francisco,+ca&aq=&sll=37.339386,-121.894956&sspn=0.501699,1.056747&ie=UTF8&hq=&hnear=San+Francisco,+California&t= h&ll=37.775057,-122.419281&spn=0.130257,0.219727&z=12&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>

csmith12

September 7th, 2012, 11:56 AM

http://www.nme.com/boards/images/smilies/werd.gif

For chone's plans

dubojr1

September 7th, 2012, 11:58 AM

http://www.nme.com/boards/images/smilies/werd.gif

For chone's plans

What's the plan??? :D

csmith12

September 7th, 2012, 12:02 PM

He is going to engineer a new methane powered bike. We are mapping routes to cow and pig farms for feces. Here is the prototype;

http://assets.knowledge.allianz.com/img/methane_cow_q1_14330.jpg

jk, hahahaha A 129 (Dragon) trip.

dubojr1

September 7th, 2012, 12:04 PM

Damn... I was hoping I could mail some farts to you. I'd love to contribute to the project.

LOL

choneofakind

September 7th, 2012, 02:22 PM

bahaha! Well, I mean a methane powered anything could be fun. Fuel: tacobell stops.

but yeah, I'm hoping that I will be allowed to borrow my dad's pickup for spring break and head south to NC. Maybe bum over at a ninjetter's house for a couple days (I'll cook dinner for ya and help with chores in return for a couch to crash on!) and ride a ton.

Although, csmith12, we could turn a hotel room into a man-cave for a couple days :p we would have fun with that. It would be a ninjette.org dorm room. sorta.

csmith12

September 7th, 2012, 02:51 PM

I am thinking hotel close to the dragon for a early morning run before traffic gets thick.

csmith12

September 7th, 2012, 02:52 PM

This is soooooo the wrong thread for this banter.

choneofakind

September 7th, 2012, 04:07 PM

yes. Yes it is. But don't kill my brain patterns here Chris. :p

You started it!

Kevin2109

September 7th, 2012, 04:49 PM

This is another reason why I love ninjette, Alex actually uses the full potential of these forums, I feel so spoiled :o

csmith12

September 7th, 2012, 04:52 PM

You started it!

I did didn't I. http://forums.mg-rover.org/images/smilies/732_spanking.gif

Kevin2109

September 7th, 2012, 04:57 PM

I did didn't I. http://forums.mg-rover.org/images/smilies/732_spanking.gif

http://images.cheezburger.com/completestore/2011/7/8/620f0952-f0bf-4b85-acda-d6990d337ab7.jpg

xSean13

September 7th, 2012, 04:58 PM

http://i1177.photobucket.com/albums/x344/xSean13/Capture-3.png

dubojr1

September 11th, 2012, 06:34 AM

csmith12

September 11th, 2012, 07:05 AM

Can anyone see a map in this post?

nope

psych0hans

September 11th, 2012, 07:12 AM

I just tried it, not working for me either...

csmith12

September 11th, 2012, 07:52 AM

Problem is that google now uses https instead of http. In the google iframe code if you change https://maps.google.com to http://maps.google.com it will work.

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=d&source=s_d&saddr=Gloria+Terrell+Dr&daddr=39.0011211,-84.4523998+to:38.9490951,-84.412462+to:38.932507,-84.34125+to:38.90995,-84.31818+to:38.878747,-84.2629497+to:38.85867,-84.27041+to:38.836964,-84.291461+to:Willow,+KY+to:38.65727,-84.12099+to:38.59727,-84.08053+to:38.53657,-84.04041+to:38.5405108,-84.0662528+to:Falmouth,+KY&hl=en&geocode=FQA8UwIdbhj3-g%3BFSEcUwId0Vv3-imHz9Jux7pBiDE5bmBOrjHO6A%3BFedQUgId0vf3-inhjBK0kKRBiDGsHhlVE9kEJA%3BFRsQUgId_g35-imBcBMMTaFBiDG3nt5Y1nJIEQ%3BFf63UQIdHGj5-imB4WGiGKFBiDFAmsqEUk_bqw%3BFRs-UQId2z_6-imDTpruhApBiDENLfdut8Uu-Q%3BFa7vUAIdtiL6-imbD8fkB6BBiDHlGI28xSVvfg%3BFeSaUAIde9D5-imJC8Oykp9BiDER6EJK-3Cvtw%3BFfACTgIdpO_7-iknFi1ZenpBiDFWyu5JifffcQ%3BFfbcTQIdYmr8-il35bEXlnpBiDEnWO94GFGTHA%3BFZbyTAIdbgj9-ikPd9CCvWRBiDHkkiO6MIKXMA%3BFXoFTAIdJqX9-inXmzR4SWJBiDGlK86xT58t5w%3BFd4UTAIdNED9-imz2qIa-WJBiDH3AdKWoOJEOw%3BFQEpTgIdGjn5-in1SlcKSINBiDFnouefOLCrQQ&aq=0&oq=fal&sll=38.599164,-84.137077&sspn=0.240143,0.528374&t=h&mra=dpe&mrsp=12&sz=12&via=1,2,3,4,5,6,7,9,1 0,11,12&ie=UTF8&ll=38.599164,-84.136734&spn=0.257584,0.439453&z=11&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=d&source=embed&saddr=Gloria+Terrell+Dr&daddr=39.0011211,-84.4523998+to:38.9490951,-84.412462+to:38.932507,-84.34125+to:38.90995,-84.31818+to:38.878747,-84.2629497+to:38.85867,-84.27041+to:38.836964,-84.291461+to:Willow,+KY+to:38.65727,-84.12099+to:38.59727,-84.08053+to:38.53657,-84.04041+to:38.5405108,-84.0662528+to:Falmouth,+KY&hl=en&geocode=FQA8UwIdbhj3-g%3BFSEcUwId0Vv3-imHz9Jux7pBiDE5bmBOrjHO6A%3BFedQUgId0vf3-inhjBK0kKRBiDGsHhlVE9kEJA%3BFRsQUgId_g35-imBcBMMTaFBiDG3nt5Y1nJIEQ%3BFf63UQIdHGj5-imB4WGiGKFBiDFAmsqEUk_bqw%3BFRs-UQId2z_6-imDTpruhApBiDENLfdut8Uu-Q%3BFa7vUAIdtiL6-imbD8fkB6BBiDHlGI28xSVvfg%3BFeSaUAIde9D5-imJC8Oykp9BiDER6EJK-3Cvtw%3BFfACTgIdpO_7-iknFi1ZenpBiDFWyu5JifffcQ%3BFfbcTQIdYmr8-il35bEXlnpBiDEnWO94GFGTHA%3BFZbyTAIdbgj9-ikPd9CCvWRBiDHkkiO6MIKXMA%3BFXoFTAIdJqX9-inXmzR4SWJBiDGlK86xT58t5w%3BFd4UTAIdNED9-imz2qIa-WJBiDH3AdKWoOJEOw%3BFQEpTgIdGjn5-in1SlcKSINBiDFnouefOLCrQQ&aq=0&oq=fal&sll=38.599164,-84.137077&sspn=0.240143,0.528374&t=h&mra=dpe&mrsp=12&sz=12&via=1,2,3,4,5,6,7,9,1 0,11,12&ie=UTF8&ll=38.599164,-84.136734&spn=0.257584,0.439453&z=11" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Another funny thing about it, it will not render in the preview. You have to submit & refresh the post to see it.

dubojr1

September 11th, 2012, 07:57 AM

Yeah I figured out the refresh part because I couldn't see the map Alex posted until then. Let me try again using your tips. Thanks

dubojr1

September 11th, 2012, 08:06 AM

psych0hans

September 11th, 2012, 08:11 AM

csmith12 You Sir, are a f**king genius!!!

csmith12

September 11th, 2012, 08:22 AM

Alex

Maybe there is an updated to plugin to support https as well?

csmith12

September 11th, 2012, 08:32 AM

It works! It actually previewed too!

You must be using something other than google chrome. No preview for me.

dubojr1

September 11th, 2012, 08:36 AM

You must be using something other than google chrome. No preview for me.

Firefox 15.0.1

Z300

September 11th, 2012, 02:37 PM

Nice

Jiggles

September 12th, 2012, 04:27 PM

This never works for me :(

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=d&source=s_d&saddr=Carrywood+Way&daddr=Uvas+Rd+to:Co+Rd+G8%2FUvas+Rd+to:U vas+Rd+to:Watsonville+Rd+to:W+Edmundson+Ave+to:W+Edmundson+Ave+to:Oak+Glen+Ave+t o:Almaden+Expy&geocode=FWizNwIdHAu9-A%3BFQtRNgIdYWm--A%3BFb6WNQIdnAa_-A%3BFXp7NQIdPpG_-A%3BFS7-NQIdHs-_-A%3BFbUvNgIdm6C_-A%3BFToVNgIdHnC_-A%3BFTSANgIdMYu--A%3BFdCuNwIdQgS9-A&aq=0&oq=camden+ave,+sa&sll=37.17974,-121.774349&sspn=0.112835,0.161533&hl=en&mra=mi&mrsp=8&sz=13&ie=UTF8&t=m&ll=37.15 7033,-121.744995&spn=0.262677,0.439453&z=11&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=d&source=embed&saddr=Carrywood+Way&daddr=Uvas+Rd+to:Co+Rd+G8%2FUvas+Rd+to :Uvas+Rd+to:Watsonville+Rd+to:W+Edmundson+Ave+to:W+Edmundson+Ave+to:Oak+Glen+Ave +to:Almaden+Expy&geocode=FWizNwIdHAu9-A%3BFQtRNgIdYWm--A%3BFb6WNQIdnAa_-A%3BFXp7NQIdPpG_-A%3BFS7-NQIdHs-_-A%3BFbUvNgIdm6C_-A%3BFToVNgIdHnC_-A%3BFTSANgIdMYu--A%3BFdCuNwIdQgS9-A&aq=0&oq=camden+ave,+sa&sll=37.17974,-121.774349&sspn=0.112835,0.161533&hl=en&mra=mi&mrsp=8&sz=13&ie=UTF8&t=m&ll=37.15 7033,-121.744995&spn=0.262677,0.439453&z=11" style="color:#0000FF;text-align:left">View Larger Map</a></small>

dubojr1

September 12th, 2012, 05:09 PM

Jiggles

September 12th, 2012, 05:11 PM

I did everything he said

Jiggles

September 12th, 2012, 05:12 PM

lawl

dubojr1

September 12th, 2012, 05:23 PM

All I did was delete the "s" in the first "https:"

Jiggles

September 12th, 2012, 05:26 PM

Jeeze, I blame it on bad instructions from the OP

cuong-nutz

September 12th, 2012, 08:51 PM

Jeeze, I blame it on bad instructions from the OP

Blame it on the side effects of prolong use of drugs:D

Alex

September 12th, 2012, 10:54 PM

Alex

September 12th, 2012, 11:03 PM

OK - it's fixed. But in doing so, that broke all of the maps where people had changed things manually back to http instead of https.

Now you can once again just copy the text right from that box and put it between the gmap tags and it will work. The reason this broke is that the code specifically looks for http://maps.google.com to be present in the link. If it's not there, it intentionally fails. I updated that code to look instead for the https version.

Jiggles

September 12th, 2012, 11:04 PM

Thank god for point and click, I can't comprehend doing anything else

csmith12

September 13th, 2012, 05:21 AM

http://www.nme.com/boards/images/smilies/werd.gif

NevadaWolf

January 28th, 2013, 11:43 AM

Alex, I tried this today and the code from Google gives me just http not https. I get a fail with a straight copy and paste and nothing if I try adding an S.

Help?

Alex

January 28th, 2013, 11:45 AM

Alex

January 28th, 2013, 11:47 AM

Seems to be working for me? :idunno: It does come up blank right after you reply,
but if you reload the page it shows up.

NevadaWolf

January 28th, 2013, 11:49 AM

Seems to be working for me? :idunno: It does come up blank right after you reply,
but if you reload the page it shows up.

GAH, helps to work on a computer that isn't locked down tighter than Fort Knox. I see it on my iPad now.

Thanks!

EternalNewb

March 28th, 2014, 06:25 PM

At risk of sounding like a moron, I'm having difficulty with it, too. However, even when I start at maps.google.com, the url google spews out doesn't include "maps.google.com" . Help, please, oh mighty admin?

NevadaWolf

March 28th, 2014, 08:03 PM

I've noticed lately that the "customize map" is missing so cannot modify the code. That's why mine have been screenshots recently.

Alex

March 28th, 2014, 09:48 PM

Alex

March 28th, 2014, 09:54 PM

OK, I got it to work, but it's clunky.

Where the new code says https://www.google.com/maps/blahblahblah.....

Just hand edit it to https://maps.google.com/maps/blahblahblah.....

and it will work again. I can probably get it to work with the new code only, but that would break all of the existing maps on the site.

EternalNewb

March 28th, 2014, 10:44 PM

Ok, I'll try that. Thanks so much, Alex! Much appreciation.