Sometimes I want to include a map when I post something. It's been a real journey to figure out how to make things look just the way I want them, and while I'm still not there yet, I feel I'm getting somewhere.

Now, I don't want to infringe on copyrights, and I don't want to create an account on every map-making site, since I'm very good at forgetting passwords. Today I've been fiddling around with embedded interactive Google Maps. A lot of attempts didn't deliver the result I was looking for, until I got surprised and got even more than I hoped for: an embedded Google Map, including a Google Earth option!

I was curious whether it depended on something on my own computer, like a plug-in, or could everybody see it? So, I checked it with Google Chrome 11, Internet Explorer 9 and Firefox 5. It works fine in Google Chrome and Firefox, but no map shows up in Internet Explorer. Since most people still use that as their browser, that's no good. Suggestions on how I can improve my map so everybody can see it?

Click here to see the album with the map

I'll keep trying, but right now, the code looks like this:

Code: Select all

<noformat>
<div style='width:722px;margin:0px;padding:0px;border:2px solid #6db466;font-family:Arial,Helvetica,sans-serif;'>
  <iframe width=720 height=680 border=0 src='http://maps.google.com/maps&#63;f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=-43.72104,170.06445&amp;aq=&amp;sll=-43.746297,170.066986&amp;sspn=0.524813,0.85968&amp;ie=UTF8&amp;t=p&amp;ll=-43.723909,170.076513&amp;spn=0.042179,0.061712&amp;z=14&amp;output=embed'>
  </iframe>
</div>
</noformat>

IE has historically not been as compliant as other browsers for rendering CSS. I wonder if the iframe tag is chocking IE? I don't know because I am unfamilar with it. The map appears to be rendering properly in IE on my machine, but I can't comment on the Goole Earth Plugin extension because I am too lazy to unload it.

I gave up on Internet explorer almost a year ago. While using firefox 4 the map displayed just fine for me. The Map does not work in internet 7 (just tested).

Thanks for checking, guys.

ExcitableBoy wrote:I wonder if the iframe tag is chocking IE?

I don't think that the iframe tag is the problem per se, because I've used it previously in my route pages. The main difference is that previously I was embedding something from http://www.wandermap.net instead of from http://www.google.com.
Of course, it could be something in the way I'm using the iframe this particular time that is incompatible with IE. I've compared it what I did before, didn't see anything strange but tried a few changes anyway, but no cigar.

ExcitableBoy wrote:The map appears to be rendering properly in IE on my machine, but I can't comment on the Goole Earth Plugin extension because I am too lazy to unload it.

That's good to know, that means that at least part of those that use IE can still see the map - even though, strangely enough, I thought I had the plug-in, yet the map doesn't show in IE for me.

Josh Lewis wrote:I gave up on Internet explorer almost a year ago. While using firefox 4 the map displayed just fine for me. The Map does not work in internet 7 (just tested).

I switched from IE to Firefox years ago, and switched again to Google Chrome last October. Much faster, and less problems! However, for my job I have to use IE occasionally, which is why have it installed as well, and even upgraded to version 9 recently.

By the way, my continued testing revealed something else: if I put the code in a separate file on my own computer, and load it into any browser (Google Chrome, Firefox or IE), the map shows! So, it's not simply a matter of IE not showing the map, it's IE not showing the map as embedded in Summitpost. That makes me wonder if the stylesheets as used by Summitpost might have something to do with it. I'm feel like I'm getting a hands-on education in HTML here!

Didn't try myself but first thing that pops into my eye is incorrect syntax of html element attributes.

Code: Select all

<noformat>
<div style='width:722px;margin:0px;padding:0px;border:2px solid #6db466;font-family:Arial,Helvetica,sans-serif;'>
  <iframe width=720 height=680 border=0
(...)

All single quotes above should be double quotes, and the values of the width, height etc. attributes of the iframe tag should be wrapped in double quotes too:

Code: Select all

<noformat>
<div style="width:722px;margin:0px;padding:0px;border:2px solid #6db466;font-family:Arial,Helvetica,sans-serif;">
  <iframe width="720" height="680" border="0"
(...)

2) If I open the URL of the iframe's src attribute directly it says the page does not exist.

3) I've too embedded google maps into SP pages and noticed that when I edit a page and click save, google maps don't show right away. I have to reload the page in order for the map to show up.

phlipdascrip wrote:Didn't try myself but first thing that pops into my eye is incorrect syntax of html element attributes.

Code: Select all

<noformat>
<div style='width:722px;margin:0px;padding:0px;border:2px solid #6db466;font-family:Arial,Helvetica,sans-serif;'>
  <iframe width=720 height=680 border=0
(...)

All single quotes above should be double quotes, and the values of the width, height etc. attributes of the iframe tag should be wrapped in double quotes too

I admit that I'm lazy in that I often leave the quotes altogether. I find that it makes the HTML more readable. If the attribute value is a simple word or number, I've never had any problems with it, even though it's officially not correct. However, single quotes instead of double ones are legal (I just rechecked it on w3schools to be sure), and, more importantly, all three browsers accept it. Usually, I use single quotes when there is a double quote in an attribute value. In this case, it's just a coincidence: I had tried double quotes first, then single, and when posting in the forum, it happened to be still single quotes. Nevertheless, to exclude that I'm missing something, I've changed all the single quotes back to double ones again. No change in results.

phlipdascrip wrote:2) If I open the URL of the iframe's src attribute directly it says the page does not exist.

Good point. I just tried that and had the same. I saw the problem right away: it's the ? character right after http://maps.google.com/maps. That's a fancy way to specify a ? character, but if you use that directly, it doesn't work. When I first embedded my map, I did use ?, but in one of my attempts to get it working I thought that perhaps some script on SummitPost was processing the ? itself instead of just passing it along. It didn't make any difference. I've changed it back to a ? now, to avoid confusion.

For the sake of completeness, here is how the code looks now:

Code: Select all

<noformat>
<div style="width:722px;margin:0px;padding:0px;border:2px solid #6db466;font-family:Arial,Helvetica,sans-serif;">
  <iframe width="720" height="680" border="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=-43.72104,170.06445&amp;aq=&amp;sll=-43.746297,170.066986&amp;sspn=0.524813,0.85968&amp;ie=UTF8&amp;t=p&amp;ll=-43.723909,170.076513&amp;spn=0.042179,0.061712&amp;z=14&amp;output=embed">
  </iframe>
</div>
</noformat>

As you can see, I've left the & characters, which are basically &, because I've had bad experiences previously when putting in & directly. I forgot in which browser that was, but I learned that & works everywhere and & doesn't. If you use the url directly, at least Google Maps is opened, but to get the correct parameters, you would have to replace all & by & characters yourself.

phlipdascrip wrote:3) I've too embedded google maps into SP pages and noticed that when I edit a page and click save, google maps don't show right away. I have to reload the page in order for the map to show up.

Yeah, that's the same when using Google Chrome, and it took me a while to figure that out at first. For IE that doesn't make a difference. However, I just had a hunch and discovered that when the map doesn't show in IE, you can right-click on the map area itself and force it to Refresh - and then it shows!
I don't understand why. It makes me think that there might be some caching thing going on, but even if that's the case, then why doesn't the old version of the map get displayed when I simply (re)load the whole page?

If only I could force a refresh of the contents of the iframe somehow ...

If only I could force a refresh of the contents of the iframe somehow ...

You can, in Javascript. Give the Iframe an ID, use the usual DOM naming (I think even IE is compliant these days, though you might need a workaround for very old versions).
Something like myframe.location.href="http://www.googlemaps.com/..."
Try doing that from the Body OnLoad event for the page.

Nice bug catch. I saw it in IE, but once I right-clicked and got the map loaded, I couldn't duplicate the bug. In fact I made a test HTML page containing nothing but an IFRAMEd Google map (different location so the map isn't in cache) and I don't see it. Something in particular on the SP page triggering the bug?

I´m on the road right now, so I don´t have my own computer to fiddle around with javascript and see if I can get it to work. From my earlier trials and people´s responses, I´ve concluded so far that there are a lot of factors colluding to produce the problem:

1) IE
2) Summitpost
3) Google maps

I concluded all this because

1) It all works well in Firefox and Google Chrome.
2) From various other sites, as well as from a local html file, the iframe with the google map works fine, even in IE. Why SP handles this differently than, say, the preview option from google maps itself, I don´t know, but it appears to do so.
3) When I put something else in an iframe, notably a route from wandermap.de, which is based on google maps (!), it gets loaded correctly in IE (and other browsers) on SP.

Cheers, Rob