Quarter Life Crisis

The world according to Sven-S. Porst

« Them and UsMainAll right, here we go »

Google Maps + Wikipedia

108 words

It’s an interesting idea that Google Maps tries to integrate Wikipedia entries now. But I think this may need a little more fine-tuning to end up on the right side of the useful-vs-confusing line:

[Try it yourself]

I also didn’t have the impression that the larger Wikipedia icons represent more important points. The same holds for the new option to put photos right on the map. Great idea, just not fine-tuned enough yet. I also wonder whether this might push the Panoramio site even more than automatic integration with Google Earth does. I mean who wants flickr if their photos could be in Google Maps with another site?

June 16, 2008, 9:34


Comment by Kevin Dixon: User icon

Sven I agree with you. Google Maps Wikipedia Layer could be more fine-tuned. I have made a personal web page with a Google Maps Panoramio Layer, which works really well. I prefer not to use large (or any) info windows as they move (pan) the map and spoil the experience. So to correct this I tinkered with styles on the external Pano Layer javascript. Now instead of an info window I write the info window html code to an empty DIV in a sidebar. It is much better without those annoying ugly info windows popping up every time. I would dearly like to do the same with the Wiki layer, but haven’t yet found the code to modify and do that. Also at the moment with Wikipedia I mostly get empty info windows with no text and simply a link to the full article.

I would like to do something similar to (better than, if possible) this http://www.mapchannels.com/holidaymaps.aspx but use my own code and not copy or depend on third party hidden code. It is early days as I have only just begun to look at this. If I find an answer I will let you know. Regards Kevin Dixon

November 4, 2009, 11:57

Comment by ssp: User icon

@Kevin: You’re right that the panning induced by the info balloons can be quite annoying – or even destructive on small maps. Displaying the extra info outside the map sounds like an interesting idea. I can still understand Google’s need to do everything inside their map area by default as that’s all they can (and should) control when being embedded. Anything better than that will inevitably require the extra effort you’re making.

November 4, 2009, 14:22

Comment by Kevin Dixon: User icon

Sven Thanks for the quick answer. I agree with your comments.

I always make sure I leave the javascripts with original credit notices on them and the Apache License notice (which says you can modify the code but must indicate clearly what you have done).

I found out why I had empty Wikipedia info windows with no text showing. My styles were from an older page of mine, with body text specified as color:#ffffff, which is white, as is the default info window. So I thought the wiki layer wasn’t working, but in reality I couldn’t read white text on a white background. Sven if you email me I will send you a link to my DIVed panoramio page. I would rather keep my personal website out of the general public domain though. Thanks Kevin Dixon

November 4, 2009, 18:31

Comment by Kevin Dixon: User icon

Sven I have now added Wikipedia to my Panoramio page. At this stage it is info window bubbles only for wiki. The Panoramio html is written to a sidebar DIV on the right.

The best feature is that you can have your favorite photo statically displayed on the right and at the same time explore the wiki icons on the map to the left (albeit with info bubbles). Probably this is a good compromise. I would however like more control over the style of the info window and ideally get access to the contained html. I have sent you a link to the web page. Looking forward to your comments.

November 5, 2009, 14:00

Comment by ssp: User icon

Interesting work, Kevin!

I guess it’d be interesting to have the Wikipedia info – or even the article’s full text! – in the box on the side as well to avoid panning problems caused by the Wikipedia bubbles.

One thing I think you still need to think about is how you adapt the site to work on ‘small’ screens. Even when letting my browser window fill the whole MacBook screen (which, ordinarily, I would never do) I cannot view the full width of your page. So I assume you must be using a machine with a rather large screen ;)

November 5, 2009, 14:20

Comment by Kevin Dixon: User icon

Yes sorry Sven The screen I use is 22 inch monitor 1680 x 1050 pixels. I always used to design my web pages for 800 x 600 pixels and most of my web pages are still that size. I got ‘carried away’ with the panoramio page and it is 1400 pixels wide, due to the map div and photo div side by side. I have viewed it on a small netbook and yes you need to scroll around, not very good. I would also like to write my pages so they can be displayed on a mobile device, like a PDA. It is finding the time to do all these things. Really I should design for screen resolution sensing and switching at the start. I will think about that and hopefully make some improvements soon. Possibly an alternative mirror web site designed for small screens. Thanks for bringing this to my attention.

November 5, 2009, 15:11

Comment by ssp: User icon

Designing for 800px width is a good idea, I think. Even though most people have wider screens these days, the issue remains that most pages contain text and there are just so many characters in a line which you can read comfortably. Hence any greater width has to be dedicated to mostly useless decorations. Of course a page like yours is more graphical and actually uses the extra width in a productive way, so the space actually well-used. But my standard browser window size is not set up for that.

I think a good way to handle this on your page may be to make the width of the map view flexible. That will probably require a bit of work to make sure your buttons display correctly in narrow setups (perhaps you can just move them outside the map view? or remove the coordinates?), but if it works you’d have the full set of features for everybody with the extra convenience of a large map for people using large screens and browser windows. Win-win!

Probably you’ll have a hard time making this work on PDA-like devices anyway. At least on my iPod I found Google Maps to be hard/impossible to use when appearing in web pages. I suppose that is because the interaction provided by the touch screen interface makes it hard to distinguish between interaction with the whole web page and interaction with the map only.

November 5, 2009, 15:44

Comment by Kevin Dixon: User icon

Thanks Sven. Good advice. I will put this on my ‘to-do’ list. It will get done eventually … when I find the time and inclination.

Excellent. Thanks very much.

November 5, 2009, 16:15

Comment by Kevin Dixon: User icon

Sven Take a look at the page photos1.html it is half the size of photos.html. This is work in progress so there are still a few odd effects with the layout.

I simply went through every style section and divided everything by 2. I did this on the main html page and also in the style sections of the external javascripts.

A classic case of separating thinking from doing.

I thought, try that it might work. Worked through all the styles not even looking at what I was changing. So 10px becomes 5px, 9px becomes 5px, etc. It took 10 minutes and I was quite surprised at the result. A mini version of my web page. CSS styles are great, they make scaling easy. Regards KD

November 5, 2009, 17:55

Comment by Kevin Dixon: User icon

Sven The simple brute force technique described above gives perfect results in some browsers and not so good in others. Internet Explorer, Firefox and Opera … in Windows are fairly good. Firefox in Linux Ubuntu is perfect, Epiphany and Opera in Linux displayed various layout problems. I will do the usual and spend some time removing the differences. Sorry I don’t have Safari browser, although I know it can be installed on Linux. I will try to install it later. Meanwhile, did you look at photos1.html in Safari? Thanks

November 6, 2009, 12:48

Comment by ssp: User icon

Looks OK to me (but tiny text!) up to a bit of overlap of the labels and starts falling apart when I increase the font size.

Will send screenshots.

November 6, 2009, 15:06

Comment by Kevin Dixon: User icon

Thanks Sven I have added a button to select either the larger page or the smaller page. Then I checked in Safari on Windows XP and it looked okay. I am tweaking the styles to get the best compromise. Sorry for hijacking your blog with this topic. If you like we could discuss it via email. You decide. Thanks for your help. Kevin D

November 6, 2009, 17:22

Comment by Kevin Dixon: User icon

Increased font sizes so I think you will be able to read the text now. Put a negative left margin on zoom buttons so info window shows completely. Checked in Opera, Safari, Internet Explorer and Firefox. Epiphany has slight sideways shifting of text boxes. Also did some work on posting zoom levels and coordinates to my other map pages. This gives seamless integration when changing pages. PHP on the target page grafts in the coordinates $zoom, $latitude etc, etc. I would be interested to read your comments about the new smaller photo1.html page. Thanks Sven

November 7, 2009, 9:23

Comment by ssp: User icon

Yup, seems to work all right now.

Cool idea to transfer the location when clicking a link! Perhaps you could even transfer the complete display mode to make this even more seamless.

November 7, 2009, 10:05

Comment by Kevin Dixon: User icon

Yes I did think of that as well. It will be done sometime soon, but today is a nice day and I want to go out. Return to this Sunday evening. Regards Kevin

November 7, 2009, 11:05

Comment by ssp: User icon

No hurry, Kevin. You’re working so quickly that it’s hard to keep up watching already. Enjoy your weekend!

November 7, 2009, 12:04

Comment by Kevin Dixon: User icon

Sven Your comment of November 7th reads …

Cool idea to transfer the location when clicking a link! Perhaps you could even transfer the complete display mode to make this even more seamless.

4 days of effort later. Seamless idea is implemented (but not yet done panoramio button status, wiki button status or crosshair button status). I used PHP and javascript to post the forms, I transfer the map type button status (sat, ter, hyb, map). You can also input a photo id number and the map goes straight to the photo. View an image near the edge of the map and then click on its photo id number displayed in the sidebar div. The map will center on the ‘edge of map’ photo marker, this is useful for panning along a coastline.

I use PHP to parse (as a string) the panoramio page of a particular photo and use a simple PHP “get the string between string abc and string xyz” to extract any information I need to get my page to work.

I have used this approach in the past to extract weather images from meteocentre.com and eumetsat that have random filenames. As long as I include all the necessary credit and copyright notices and links to them on my webpage then I think this is okay. I even emailed my code to meteocentre just to check with them this was okay.

I use PHP only when I can’t do something in Javascript and then I always find PHP makes it easy. Perhaps I should learn more PHP and consider using it as the first option more often ? Please tell me what you think of the photos.html and photos1.html web pages. Thanks for your time. Regards KD

November 12, 2009, 17:31

Comment by ssp: User icon

Sorry for the late reply, I’m suffering from a computer breakdown here :/

I think the pages are coming along nicely. I still think exploring a variable with variant may be interesting. One further thing I notice is that in some locations the Copyright information at the bottom the map is so long that it extends out of the map’s box to the left on photos1.html. This doesn’t break things but it’s not overly pretty (perhaps you can just hide the overlap by using overflow:hidden?)

November 15, 2009, 13:14

Comment by Kevin Dixon: User icon

Sven Yes, I noticed that as well. I have done some preliminary research on the subject of the Google Maps Copyright notices. I don’t think you are allowed to modify, move or alter them in any way. They vary in length depending on which part of the world you are looking at. I might contact Google about this.

“I still think exploring a variable with variant may be interesting”. Could you please explain this sentence a bit more please, thanks.

I am going to add ‘camera make and model’ and ‘date picture taken’ to my default views. This should be easy using PHP, although the extra information is not always present, I can test for it and only display something if it is there. After a few months I would soon know which camera is the best one to buy. Regards Kevin Dixon

November 19, 2009, 10:36

Comment by ssp: User icon


I don’t think you are allowed to modify, move or alter them in any way. They vary in length depending on which part of the world you are looking at. I might contact Google about this.

Obviously I have no interest whatsoever in Google’s copyright notices. And certainly should not extend beyond the area of the map. The area inside the map is theirs. Everything else on my page, they should not mess with.

“I still think exploring a variable with variant may be interesting”. Could you please explain this sentence a bit more please, thanks.

You can make the map’s iframe variable width. That way it adapts to the space available on the page (depending on font size, window size etc, giving the maximal map area that makes sense for the current user’s setup. This page I made could serve as an example. Resize the window and see how the map’s size follows. It also suggests that the map’s standard behaviour is to clip the copyright notice when space is insufficient.

November 19, 2009, 15:33

Comment by Kevin Dixon: User icon

Sven Thanks for the good advice. I already use overflow:hidden in my sidebar DIV and might use it for my Google copyright notices. I see that it works well on your Google Campingplatz map when resized to a very small width. On some browsers I tried, this caused ‘bunching up’ of the copyright text and stacking of the words into a tangled pile at the left, whilst other browsers simply ran the Copyright Notice off the edge, neatly hidden outside of the map area. I agree, it is then obvious that there is a copyright notice to be read and it is obvious that to read it requires a drag of the map edge or other resize operation. I am impressed with your Campingplatz web page, it is great that this holiday destination now has its own Google Map with places of interest and a Get Directions sidebar. I must tell you though, Opera browser in both Windows and Linux does not display the thumbnail photos at the top, only black squares with text only links. This can probably be fixed easily. Everything else looks fine in Linux Opera, Linux Firefox, Linux Epiphany, Windows Firefox, Windows Opera, Windows Safari, Windows Internet Explorer (compatibility and non-compatibility modes).

IFRAME is not part of HTML 4 strict, whereas OBJECT is used and I am staying with HTML 4 strict for the time being. I had a similar conversation with Dirk Matussek when I tried to embed his Astroviewer applet in my HTML 4 Strict web page —-/space/planets.html. HTML 4 strict doesn’t like APPLET tags. Dirk suggested using XHTML but I decided to hide the APPLET tags in javascript using document.write. I don’t like cheating the W3C validator like this and do it only when I have to. Anyway my website is just a hobby, non-profit and educational for myself and a demonstration of creativity.

I hope your computer problem is now fixed, don’t worry about the late reply, I went away to visit friends for 4 days last week. I shall endeavour to get my map to clip the copyright notice when space is insufficient and will try to locate the original Wiki code so I can put the HTML in a DIV rather than an Info Window. I am currently working on the ‘Camera used’ and ‘Date taken’ features.

Do you use any PHP on your sites? Regards Kevin Dixon

November 19, 2009, 22:31

Comment by ssp: User icon

thanks for the note on Opera. I don’t usually care about that browser as it’s so rarely used and usually seems to implement standards well enough.

I don’t think your idea of inserting ‘forbidden’ tags via JavaScript is a good one as they still remain forbidden in the DOM, so you’re just doing a little dance to keep the validator happy. I just switched to transitional HTML at some stage as I couldn’t see any practical benefits from using strict on my pages. That way I don’t need to fool the validator.

I’m hoping to get the computer back today – this stuff always take a bit too long for my taste. Particularly as the old machine I’m using instead lacks a lot of software as well as my settings, so everything is a bit provisional at the moment.

There’s plenty of PHP in these pages. But only lightweight stuff, like inserting common elements of the page. I find PHP very convenient for that as I can easily integrate it with the HTM but loathe it in general as the language seems so chaotic, poorly documented and hard to debug.

November 20, 2009, 10:20

Comment by Kevin Dixon: User icon

I read some of your posts about your Portugal holidays, very interesting. I have been taking Portuguese lessons, only 1 or 2 hours a week, every week since September 2008. I should practice every day but as you know I am a bit of a ‘techie’ and get too busy with web pages etc. I thought maybe doing something like Portuguese Flash Cards or Verb Tables on my web site would combine my web design hobby and my desire to learn Portuguese. Incidentally, I did German for 2 years at school aged 12 to 14 (now 48), but did not continue with it to exam level. I have been told by German people I meet that my accent/pronunciation is excellent. They always say I should continue with learning German. Well, I watch your TV channels on Astra 1 when there is nothing good on British TV (every day).

I think I will use the PHP only when necessary and also I agree that hiding forbidden tags using javascript is not the way to go. I have done this only twice on the whole of my site. Usually happens when I am in a hurry to finish a web page. It then gets left and forgotten, because the page works. Purist (pure and done by the rules) or pragmatist (doing what works), I sometimes break the rules, but not often. Thanks for your comments Sven. I will try to make some progress with the Wikimap info windows and other code this weekend. Have a good weekend.

November 20, 2009, 11:53

Comment by Kevin Dixon: User icon

Hi Sven I have not yet found a way to capture the Wiki Info Window HTML (like I did for the Panoramio Info Windows and then write them to a DIV). I will keep researching this. However, I have improved the small photos Google Map (photos1.html). Added a Drag Zoom function with back button. I shortened the widths of all buttons so I could squeeze in this extra button. I have also enabled a double click zoom (left mouse button) in all browsers. Double click zoom out (right mouse click) in some browsers (not opera yet). Also the Camera Info and Date Taken functions are now implemented. If you click on the yellow photo id number below the photograph then the map will zoom into 13 or 14 and centre upon that photograph. Also if Camera and Date are available on the photo’s Panoramio page “extra information” then that will be displayed on my webpage under the photograph. I might implement your continuously resizable map idea sometime in the future. For the time being, I shall stick with 2 maps, one large and one small. Hope you like the improvements. Kevin Dixon

November 23, 2009, 21:10

Comment by ssp: User icon

I am not sure I’d actually use it but the drag zoom is a sweet idea :)

November 23, 2009, 23:05

Comment by Kevin Dixon: User icon

Thanks for you comments Sven. I think now is a good time to reveal the pages we are talking about to anyone reading this. I had hoped to keep my personal website low traffic and private, but in the interests of helping others here are the links. http://kdworld7.net/maps/photos.html is the large format page for 19 and 22 inch screens, and http://kdworld7.net/maps/photos1.html is the small format version for netbooks and small screens. All my web pages are under development though I try to do any ‘crazy experiments’ on unlinked pages. Only when pages are ‘good to go’ do I link them to the main site. I have implemented overflow:hidden for map text that spills over the map edge. Map buttons show a slight layout ‘right shift’ in Internet Explorer earlier (non-compatibility versions) okay in IE8 though. I will try to fix this issue. People interested in doing something similar should be able to work out what I have done if they are reasonably skilled and enthusiastic. Regards Kevin Dixon

November 24, 2009, 9:39

Comment by ssp: User icon

Great that you’re going public! Saves me having to go through my e-mail and find the URL when catching up on the latest updates.

November 24, 2009, 10:23

Add your comment

« Them and UsMainAll right, here we go »

Comments on




This page

Out & About

pinboard Links


Received data seems to be invalid. The wanted file does probably not exist or the guys at last.fm changed something.