Embedding a map with only my photos

[badgerh]

Please accept my apologies in advance but I have searched for hours and cannot find the solution. I have a web page with an embedded map. I use the following code and it used to work perfectly:

iframe src="http://www.panoramio.com/plugin?lt=43.225881&ln=2.615261&z=2& user=1367118& k=0" width="700px" height="500px">

(Taken out iframes or it might actually do it!)


Here is the URL http://www.au-berg.com/page28.html
Now I get a mass of photos on the page. I specifically want just one or two to show people how to get to particular sites. When I look at the help page for embedding maps, there is no mention of the user tag. Is this now obsolete??

BTW, how do I find my user ID. It may have changed as this page is very old

Thanks in advance
Andrew from Addis

[Galatas ©]

Tomas is probably the man to help with your problem.
Your user ID is the number on the end of the URL of your user page ( 1367118 ) it never changes.

[badgerh]

Thanks Galatas - at least one thing is correct - my userid!

Now I will wait for Tomas or others to help with the code

Andrew from Addis

[JBTHEMILKER]

Cool map. I would like to be able to do that.

[badgerh]

Quote JBTHEMILKER:

Cool map. I would like to be able to do that.

That bit is easy- just look under help when at your photos.
Here:
http://www.panoramio.com/help/embedding

The problem is getting only your photos

Andrew from Addis

[AustinMN]

Be sure to also look in the API forum, here:
http://www.panoramio.com/forum/viewforum.php?f=38

Austin

[brancin]

Have a same problem in my site, with old API it was ok ... bud now maybe 2 years it is not working more.

[Tomas K☼h☼ut]

Hi, I am not sure if it was Galatas's call for me.

Sorry, I am not very familiar with this use of API. I only know - there are some bugs and removed functionality since September 2009 server migration.

But anyway, this topic belongs to API forum, so I am going to move it here.

[Charles Leigh]

So I'm guessing it's not possible to embedded a map with only your photos?

Ugh!

[havirho]

Correct, It's still a problem since the big change some years ago, check the list with known bugs: http://www.panoramio.com/forum/viewtopic.php?t=20934

On my own website it's still active, but it's indeed of no use (still hoping for solution). I now have plans to upgrade parts of my website, and wil then remove the panoramio part.
Hans Visser

[badgerh]

Thanks Hans,

I guess I will do the same as you - perhaps in one case I will make a static map and put a couple of photo links on it - big pain but it has been so long since this worked properly that we cannot expect a resolution in the near future.

Andrew from Addis

[Matthew Walters]

Would you be able to achieve what you want with the new Google Map/Panoramio API?

http://code.google.com/apis/maps/documentation/javascript/overlays.html#PanoramioLibrary

Matthew

[junk0128]

Quote Matthew Walters:

Would you be able to achieve what you want with the new Google Map/Panoramio API?

http://code.google.com/apis/maps/documentation/javascript/overlays.html#PanoramioLibrary

Matthew

I made it with PanoramioLibrary. Please refer to follows.

http://www.justmystage.com/home/junk0128/mpp2blog/?user=1597930&lt=33.216817&ln=130.360642&z=12&k=2

[kjdixo]

Quote:

Now I get a mass of photos on the page. I specifically want just one or two to show people how to get to particular sites. When I look at the help page for embedding maps, there is no mention of the user tag. Is this now obsolete??

@badgerh
Hello there. This problem was solved in the thread http://www.panoramio.com/forum/viewtopic.php?t=21115 started by Denis Dwyer.
I am surprised that nobody pointed this out to you as several of the above people were following that particular thread (or perhaps not as keenly as I thought). Maybe it was too complicated for them. The provided solution is actually very simple. Here is a link to an example HTML page, be sure to include the external JavaScript.
http://kdworld7.net/maps/test/mini-test6.html
http://kdworld7.net/maps/test/single_user_pano2.js
In the JavaScript it is possible to change the thumbnail and mini square URLs to your own images, though I won't elaborate further as this is a Panoramio thread.
See my post dated 17 Jan 2011.
You can make copies of those files for your own website.
Thanks.
I hope this helps someone.
Kevin Dixon

[kjdixo]

Updated for people who prefer not to use an external JavaScript.
The HTML page now contains all the necessary JavaScript.
http://kdworld7.net/maps/test/mini-test7.html
The HTML file is about 10Kb in size.
JavaScript is left until last so the page elements are rendered, set up and ready before the code runs.
This uses the older GMap2 Google maps version (API key probably required) which still works well, but there are probably more modern ways.
Please also note the normal recommended method is to use an external JavaScript file.
I am toying with the idea of writing a 'User Created Tool' in PHP, where people simply type the Photo id's of their photos and a comment for each marker pop-up into a 2 column list, formed from text input boxes.
Clicking a 'generate' button would then display the necessary page code in a text area on the same page which could then be copied and pasted as required.

[kjdixo]

If you don't like those horrible 'info windows' that pop-up on the map
then write your marker information to an 'off-the-map' HTML DIV element.
http://kdworld7.net/maps/test/mini-test8.html.
This is with minimal changes to the previous example.
Probably the code can be shortened, maybe, in places, but for tutorial purposes it is a simple modification.
KD

[kjdixo]

An improvement for those perfectionists that notice jumpy image loading.
Pre-load images onto page (and keep them hidden using 'display:none' in <style> section)
to provide snappier more reliable loading of the images onto the map.
http://kdworld7.net/maps/test/mini-test9.html
Enjoy.

[kjdixo]

To make the photo maps mentioned above, you need each photo's decimal grid coordinates.
These are easy to find, using the following page:
http://kdworld7.net/maps/photos.html

Coordinates of any 'clicked' mini-square on the map are displayed under the map in big digits.
Those coordinates can then be used in the code of
http://kdworld7.net/maps/test/mini-test9.html

KD

[perpetualis]

Oh god, please excuse the poor tumblr user that just stumbled in here, I don't know a single thing about code but managed to jam all kinds of crap onto my tumblr from re-tweet buttons to fb social plugins thru trial and error and just hard work. It actual looks pretty good and I'm even stupid enough to be a little proud of myself...

But I got on here specifically to do just what we you are talking about here, but with something like 150-300 photos per site... So where am I on this? I've done one site and just about every last image got selected for google earth which is fine, but what is the functionality with that from within my blog? I just got google earth during this wtf and why doesn't it work phase, is all the functionality I'm looking for there? Is panoramio of no other real use to me but to run a slide show of each site via html? We are talking about 150 pics on the first site, a few too many maybe to check the coordinates and individually list in html, it's enough code already!@! Is all of this just some google decision to have any of this kind of functionality operate only in earth? Thank you in advance for all and any patience you might extend to my poor self, MJ.

[QuentinUK]

You can save the photos data as a KLM file. Them you can import this into Google Earth or into a Google Maps layer.

Google Maps can also have a Panoramio layer, so you can show the photos of one user. For multiple users' photos you can add multiple Panoramio layers.

Or you can do a JSON query to get the photos' data and do anything you want with it. Typically put markers on a map. Then as the mouse moves/clicks etc show the photo in a pop-up or next to the map.

[kjdixo]

Quote:

It actual looks pretty good and I'm even stupid enough to be a little proud of myself...

and
I don't know a single thing about code but managed to jam all kinds of ...

Hello perpetualis
Please see the quote above . . .
So if this is the case then it is probably best that you steer clear of any coding and instead use a helper interface that can build the code automatically. I don't think there is such an interface/program/script with all 'the bells and whistles' to do 'everything you want in 5 minutes'. Also 150 to 300 photos would be a huge task to implement using the method I described in my post of Oct 29th, (but not impossible).
All the points made by Quentin are correct although they also require a little technical effort, which might be beyond the capabilities of many people. However even non-technical people can make progress if they are given easy to follow examples.
Quentin might be able to point you straight to some examples that already exist, or failing that I could demonstrate each of his outlined methods for you.

[perpetualis]

First and foremost, thank you both so very much for your concern and support. I have most of the simple html examples of cute widgets provided up and reasonably running in test pages at this point. I plan on rolling out a bunch of them tonight, and will be very busy with them. And don't get me wrong, I am very happy with what is there, they represent ideas about how to use panoramio that I had not yet had, and I am very excited about what I will be able to do with them.

Quentin, I have managed to view the shots in earth, and am only sad that some cute map will not simply live on my site, ready to entertain my guests. And I do understand that this is possible, it's just that, um, JSON is obviously some kind of greek, and while I will gladly try to start learning greek, it won't help me for tomorrows roll out of coolness. I would LOVE to do what you describe, and have reviewed the material, it's just beyond my capabilities at this point. Of course coding, (er um, by coding I mean shoehorning, delete, repeat), html was beyond me a week ago, so....

kjdixo, yes, the 150 shots of the first double site, (two locations next door to each other), would be difficult to do one at a time. Learning greek over the next week or two, or buying someone who knows greek dinner, would probably be time much better spent.

I noticed from the dates of posts on this subject that it has been a sore point for awhile, it seems to me that this kind of implementation is the #1 reason to be here. Well, this comes from someone who is trying to use the platform for a kind of artistic archeology of american cemeteries of the northeast, so, um, I might be a bit touched.

Any examples of canned code served up to a simian level of intellect would be of great assistance. I would set my million chimps right on it ;)

[kjdixo]

Perpetualis
I am signing off for tonight, as it is late, but I will look at this tomorrow.
When you have made some significant progress please post a description here (short summaries please, with links to examples if possible).
I (or Quentin) will then try to help.
If it gets too technical or long-winded then other forum members sometimes lose patience and request that the exercise be conducted via email.
With that in mind, good luck with your current effort and let's see what we can do tomorrow.
Kevin Dixon
England

[kjdixo]

Firstly, I have not used the API V3 and only have experience of the API V2 from a few years ago (it still works).
Also these rules are worth noting:

Google Maps API:
http://code.google.com/apis/maps/faq.html#tos_tiles

Panoramio API:
http://www.panoramio.com/api/data/api.html

The maximum number of photos you can retrieve in one query is 100.
Every photo displayed in your site should include Panoramio's name and logo.
Each mini square-, square-, thumbnail- or small-size version of a photo must link to a medium or original sized version of the same photo.
Each medium or original sized version must link to the photo page on the Panoramio.com domain.
The link should be under the image itself.
No more than 50 instances of photos can be displayed on one single webpage.

Here is a web page that uses a Panoramio JSON GET without a map to display your photos in Philadelphia. Strictly speaking, a Google Map should also be present on the page.
I have only added a button that links to a Google Map, so I will need to implement a map later.
http://kdworld7.net/maps/gmap_perpetualis.html

The code is quite complicated in that it uses an external JavaScript
http://kdworld7.net/maps/user_pano_layer7.js
But I thought you might be interested anyway, as it demonstrates extraction of your own photos from one particular location.
Also my old slideshow script is 'belt and braces' and I have since written a simpler script.

[kjdixo]

Perpetualis
Here is another approach to the JSON GET:
http://kdworld7.net/maps/test/jan/panotest2.html

it uses an external JavaScript:

http://kdworld7.net/maps/test/jan/user_pano_layer_jk.js
The JavaScript could be included on the HTML page.
In my experience template websites such as Google Blogspots, chop up and add to your code, which makes things difficult if you are trying to keep clean and understandable code that is under your control.
It is always preferable in my opinion to have your own website, free of advertising and intrusive third party code.
I think now is a good time for you to give some examples. Not necessarily your own work, but a few links to pages that are similar to how you want your page to look.

[perpetualis]

Good morning! This is all a little mind blowing but I am almost able to follow... It will take some amount of time I'm sure. And speaking of... I'm rolling out a version of the blog with included html cut and paste, (with a tweak or two), widgets and am plenty excited, and oh, have probably bitten off more than I can chew for today!! I think I have a handle on the rules which seem pretty simple, as long as I don't plaster twenty widgets on the same page, leaving them as is seems to satisfy the requires. Eeh, except maybe for that every photo requirement, it is enough that the widget itself has the logo isn't it? Does it just count as one big picture?

Maybe tumblr will not end up being the best choice for this project, which I plan on leaving in a kind of open source state. (Since users can place whatever tags they like, it should be simple to include a few agreed upon tags to make retrieval of project photos easy with the widgets as is.) But it sure is a hell of a lot of fun using tumblr as training wheels.

Soooo, maybe you might like to just check out the whole damn thing to get a taste of it? Maybe late in the afternoon E.S.T. when it should be a bit closer to some level of cohesion?

http://perpetualis.tumblr.com/

Again, so many thanks for this help, and for such a level of understanding for any of my mad scientist ramblings.

[kjdixo]

Perpetualis your tumblr page is very interesting and impressive.
As it is a 'template' website there might be problems stitching the panoramio code into it.
However, it is definitely worth having a go at that and problems sometimes have solutions.
I have not used tumblr before, so I might need a few days to work out what to do.
In answer to your question, whichever way you read it the Panoramio rules are clear:
Every photo displayed on your site should include Panoramio's name and logo.

Each mini square-, square-, thumbnail- or small-size version of a photo must link to a medium or original sized version of the same photo.
Each medium or original sized version must link to the photo page on the Panoramio.com domain.
The link should be under the image itself.
No more than 50 instances of photos can be displayed on one single webpage.

So you could probably dispense with the mini thumbnails and have up to 50 medium or original sized photos on one web page.
Photos must adhere to the rules and link back and 'Every photo displayed on your site should include Panoramio's name and logo'.
In summary you want to display all your Panoramio photos on your tumblr site (50 per page) and the Google map is not an essential requirement for you.
If this is a good summary then I can probably help you do this.

[perpetualis]

Quote kjdixo:

Every photo displayed on your site should include Panoramio's name and logo.
Each mini square-, square-, thumbnail- or small-size version of a photo must link to a medium or original sized version of the same photo.
Each medium or original sized version must link to the photo page on the Panoramio.com domain.
The link should be under the image itself.

No more than 50 instances of photos can be displayed on one single webpage..... Photos must adhere to the rules and link back and 'Every photo displayed on your site should include Panoramio's name and logo'...

So first of all I am totally cool with the rules I think, and actually they jive with what I am trying to do here.

The link back thing is great, I totally want to show off the bigger pics, and their location, it's the whole point here. God bless Panoramio for this functionality and they deserve more traffic and users for it.

I assume the 50 limit includes all viewable at a time shots, and not the up to 100 per query in the form of a film strip? I.E. is it possible to have a couple film strips not exceeding 50 thumbnails in total, (site in fall, site in summer, etc)? I plan on using project community defined tags to filter results, by site, user, season, whatever. I know, insane.

Lastly and super big, um... logo and name on every thumbnail in a widget?? Surely I would be wrong to think that right?? A reasonably sized widget, with less than 50 shots on the page, all linking back etc. etc.... that should satisfy right??

I plan on rolling out a few things from noon EST on. Will keep autoscroll off and avoid anything that would mess up the 50 shot count thing.

I LOVE LOVE LOVE this. It's f'ing brilliant and gorgeous at the same time. Right now the history types and the art types don't play well together. My intent is to build a better sandbox. And if I'm the only one playing in it, oh well, screw em.

Again, thank you, thank you, check back later in the pm EST to see where I am with the tools I've got? I can still see galleries of medium or large size shots on a page as being something nice, and um, oh boy that map thing is still crazy tempting. Every one of these places have natural divisions in the form of paths, sections, whatever. Very easy to subdivide to never go over any limits.

Talk later!!
MJ

[kjdixo]

Perpetualis
Probably you are right about the filmstrip, 1 panoramio logo per filmstrip should suffice.
Total Panoramio shots on 1 page (thumbnails, medium and originals) should not exceed 50.
So, I guess, you could have 49 thumbnails and 1 original or medium size photo.
You could have 4 filmstrips (winter, spring, summer and fall) with 10 thumbnails in each.
But saying that, there is nothing to stop you having left and right buttons to advance the filmstrip, as long as the total photos displayed does not exceed 50 at any one time.
Please note that I have not experimented with Panoramio tags much before, so I will have to do that first.
'4 filmstrips with 10 thumbnails in each' - that would use up 40, then you could have 10 medium or original sized photos, total 50.
Too many very large photos will take ages to load and also might not be ideal for small screens.
So it is probably best to use medium size photos on your tumblr site.
The Panoramio site does have an option to look at your original, sometimes very large, photos.

[perpetualis]

So a couple things up and running without any trouble, one with. Main page large post with one medium slide show, and one strip / medium pic, both run well. Independent page with #5 strips with 9 shots in each, of single tags each. Runs well. Sidebar 2 x2 marked, "Most recent Project" with arrow scroll on, seemed to make everything angry. Disabled it, cleaned code, running well without it there. Will consider leaving such a thing to independent page, all dolled up with multiple other things. In general, happy with results and looking forward to experimenting a bit more.

Still interested in map functionality, I don't think anything else has that, "Oh he's migrated the whole site to the net!" realization to it. The sat image next to a cut down copy of the original hand drawn plot map? KILLER. Although, if there is a way to just press a button and launch earth zooming in on the target... And BTW, I bought this thing the ancient ones called a "book" on programming html. I've made it this far literally guessing as to how it works and I know a little of my code must show the effects. I WILL do better and be in a place to accept some of the wisdom you have offered sometime this week. Again, a million thanks. Don't think anyone really noticed what I was doing today, but that's o.k., it's a process. Bet ya the first Guttenburg bible looked like crap too!

Have a good night, MJ.

[kjdixo]

Well done, I am really impressed. http://perpetualis.tumblr.com/
Obviously if you experiment with this it might break, but it looks good at the moment.
You have picked up the concepts (recommended by Panoramio) and implemented them (it all works). A look at your tumblr page will surely encourage others to do the same.
I was going to do similar in plain HTML and JS, but that might just confuse some people.
So I will probably develop something in my own time without showing every step here.
Then post it here in the future, when I have refined and simplified the code (canned code).
PS. I don't know what changes you have just made but in the time it took to write this, your Panoramio widget has gone blank. I hope you can fix that. A useful tip: Always save copies every step of the way when making changes, so you can always go back to what worked.
Edit. It works now and I have saved a copy of your code, just in case.
Also, the title of this thread is "Embedding a map with only my photos' so any improvements that include an actual map on the page would be useful.
Anyway so far so good.
Nice talking to you.
KD

[perpetualis]

Million thanks, will keep an eye on. Also experimenting with tags at some point today after adding a pic or two from a number of other targets to have material to work with. Still falls under this threads heading as, How to embed a map with only my photos, or photos that comply with the tags i choose to include. The magic here is that you can do your photos, other users, time of year whatever, combos of the above, as long everyone in the "club" is on the same page tag wise. The tagging system here seems robust and up to the problem of large scale fast edit if needed. I will play with tags at some point and try to also look for a thread on plain html widgets to include my findings, (are they additive, subtractive, is there a "don't include these tags" function etc.) and to migrate that convo to. Gadzooks, I'm going to have to start a damn group over here too. Can I quit my day job yet?

THANK YOU KD, YOU F'N ROCK,
mj

[kjdixo]

Thanks Perpetualis
Good luck with your research and experiments.
In the interests of getting back to the theme of embedded Google Maps I thought I would post my latest development page, which is a hybrid of my earlier
http://kdworld7.net/maps/test/mini-test9.html
and
http://kdworld7.net/maps/test/jan/panotest2.html
On 'mini-test9' it was necessary to hardwire all the latitudes and longitudes.
This new page
http://kdworld7.net/maps/gmap-json.html
improves the situation by utilizing the JSON GET of 'panotest2', to extract the coordinates of the map mini squares. There is no external JavaScript with 'gmap-json'
This is a 'work in progress' so full integration of filmstrip and map squares is not yet done.
Updated 22:47 UTC Sunday November 20th 2011:
Not finished but works okay so far. Will be improved soon.
KD

[kjdixo]

[QuentinUK]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Pictures</title>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio"></script>

<script type="text/javascript">



function ParseParams(urlParams){

urlParams= urlParams||{};

var e,a= /\+/g,

    r=/([^&=]+)=?([^&=]*)/g,

    d=function(s){return decodeURIComponent(s.replace(a," "));},

    q=window.location.search.substring(1);

while(e=r.exec(q))

    urlParams[d(e[1])]=d(e[2]);

return urlParams;

};



var panoramioLayer1;// one layer



function initialize(urlParams){

    var pos = new google.maps.LatLng(urlParams.lat, urlParams.lng);

    var myOptions = {

    zoom: Number(urlParams.zoom),

    center: pos,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  };

  var map_canvas = document.getElementById("map_canvas");

  var map = new google.maps.Map(map_canvas, myOptions);

  // useful fns to find location from browser's address line

  google.maps.getCenter = function(){return map.getCenter();}

  google.maps.getZoom = function(){return map.zoom;} 



  panoramioLayer1 = new google.maps.panoramio.PanoramioLayer();

  panoramioLayer1.setMap(map);

  // one layer can have one tag or one user 

  if(urlParams.tag)

      panoramioLayer1.setTag(urlParams.tag);

  else if(urlParams.user)

          panoramioLayer1.setUserId(urlParams.user);

}

</script>

</head>



<body onload="initialize(ParseParams({lat:51,lng:0,zoom:10}))">

<div id="map_canvas"></div>

</script>

</body>

</html> 

Put the above in a file, here called p1.html, then call as an iframe:-

Code:

<iframe style="margin: 10px"

src="p1.html?lat=51&amp;lng=0&amp;zoom=10&amp;tag=art"

frameborder="0" width="400" height="400" marginwidth="0" marginheight="0"> </iframe>

can have for one tag or one user
for just one user, user parameter user=2419040

[kjdixo]

Quentin.
That works.
I did as you described (by making two files off-line) and it works.
Although I have not thoroughly tested it over a long period with all possible settings, it looks promising.
The Google Maps API Version 3 that you have used is the recommended one. I have been using the deprecated API Version 2 so I will need to update all my code soon.
Thanks for this.
KD

[kjdixo]

This new page uses the Google Maps API Version 3 code (with Street view)..
http://kdworld7.net/maps/gmap-json4.html
It doesn't have any fancy tricks to reduce zoom flicker. I am working on that.
KD

[xaeoc]

QuentinUK that code is great, but i'm wondering, is there a way to change the map style?
Thanks

[Tim Lange]

Search for "ROADMAP" in the Java code and change it to HYBRID.  Is that what you are trying to do?

TIm.

[Viajando com Eles]

Hi, i'm trying to embed a map with my own pictures, but it's realy hard to do it. I did what you sad here, but my map doens't appear. 

Could you see what am i doing wrong: http://viajandocomeles.com.br/mapa-2/

Thank you.

[junk0128]

Please add a url parameter.

example

http://www.****.com/index.html?user=7262602
or
http://www.****.com/index.html?tag=yourtag