Hi,
can anyone help? I am new to javascript, and got a nice map working
with placemarks added and kml overlays. Now I would like to add a
panoramio overlay via the API, but it doesn't seem to work. I managed
to get it work separately, without any other placemarks and kml
overlays added. Here is the working version, and below the non working
version. Could it have to do anything with the double onload in the
body tag?
Many many thanks for helping out!
// WORKING VERSION
<script type="text/javascript">
var photos;
function storePhotos(panoramio) { photos = panoramio.photos; }
function load()
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.4005282934208,13.051934843477),
14);
var mapControl = new GMapTypeControl();
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var iconPano = new GIcon();
iconPano.image = "http://www.panoramio.com/img/panoramio-
marker.png";
iconPano.shadow = "http://www.panoramio.com/img/panoramio-
shadow.png";
iconPano.iconSize = new GSize(18, 18);
iconPano.shadowSize = new GSize(22, 22);
iconPano.iconAnchor = new GPoint(9, 9);
iconPano.infoWindowAnchor = new GPoint(9, 0);
for (var i = 0; i < photos.length; i++)
{
var markerPano = new GMarker(new
GLatLng(photos[i].latitude, photos
[i].longitude), iconPano);
markerPano.photo = photos[i];
map.addOverlay(markerPano, iconPano);
}
GEvent.addListener(map, "click", function(overlay, point) {
if (!overlay || !overlay.photo)
return;
var p = overlay.photo;
var p = overlay.photo;
// if photo_title is too long, cut it.
if (p.photo_title.length > 33) {
p.photo_title = p.photo_title.substring(0, 33) +
"…";
}
overlay.openInfoWindowHtml(
"<div id='infowin' style='height:" + (p.height + 80) + "px'>" +
"<p><a href='http://www.panoramio.com/' target='_blank'><img
src='/
img/logo-small.gif' width='119px' height='25px' alt='Panoramio logo' /
><\/a></p>" +
"<a id='photo_infowin' target='_blank' href='" + p.photo_url +
"'>"
+
"<img width='" + p.width + "' height='" + p.height + "' src='" +
p.photo_file_url + "'/><\/a>" +
"<div style='overflow: hidden; width: 240px;'>" +
"<p><a target='_blank' class='photo_title' href='" +
p.photo_url +
"'><strong>" + p.photo_title + "<\/strong><\/a></p>" +
"<p>Posted by <a target='_blank' href='" + p.owner_url + "'>" +
p.owner_name + "<\/a></p><\/div>" +
"<\/div>");
});
onLoad();
}
</script>
<script type="text/javascript" src="http://www.panoramio.com/map/
get_panoramas.php?
order=upload_date&set=1976779&from=0&to=20&minx=12&miny=50&maxx=14&maxy=53&callback=storePhotos&size=small"></
script>
</head>
<body onload="load()">
<div style="width: 100%; height: 100%; margin: 20px
10px;"
id="map"></div>
// NON WORKING VERSION
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.4005282934208,13.051934843477),
14);
var mapControl = new GMapTypeControl();
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//PANORAMIO
var photos;
function storePhotos(panoramio) { photos = panoramio.photos; }
function load()
{
var iconPano = new GIcon();
iconPano.image = "http://www.panoramio.com/img/panoramio-
marker.png";
iconPano.shadow = "http://www.panoramio.com/img/panoramio-
shadow.png";
iconPano.iconSize = new GSize(18, 18);
iconPano.shadowSize = new GSize(22, 22);
iconPano.iconAnchor = new GPoint(9, 9);
iconPano.infoWindowAnchor = new GPoint(9, 0);
for (var i = 0; i < photos.length; i++)
{
var markerPano = new GMarker(new
GLatLng(photos[i].latitude, photos
[i].longitude), iconPano);
markerPano.photo = photos[i];
map.addOverlay(markerPano, iconPano);
}
GEvent.addListener(map, "click", function(overlay, point) {
if (!overlay || !overlay.photo)
return;
var p = overlay.photo;
// if photo_title is too long, cut it.
if (p.photo_title.length > 33) {
p.photo_title = p.photo_title.substring(0, 33) +
"…";
}
overlay.openInfoWindowHtml(
"<div id='infowin' style='height:" + (p.height + 80) + "px'>" +
"<p><a href='http://www.panoramio.com/' target='_blank'><img
src='/
img/logo-small.gif' width='119px' height='25px' alt='Panoramio logo' /
><\/a></p>" +
"<a id='photo_infowin' target='_blank' href='" + p.photo_url +
"'>"
+
"<img width='" + p.width + "' height='" + p.height + "' src='" +
p.photo_file_url + "'/><\/a>" +
"<div style='overflow: hidden; width: 240px;'>" +
"<p><a target='_blank' class='photo_title' href='" +
p.photo_url +
"'><strong>" + p.photo_title + "<\/strong><\/a></p>" +
"<p>Posted by <a target='_blank' href='" + p.owner_url + "'>" +
p.owner_name + "<\/a></p><\/div>" +
"<\/div>");
});
onLoad();
}
// END PANORAMIO
var html = '<div style="font: normal 10px Georgia">'
html += '<h5>Till & Hannah</h5><br>'
html += '<table><tr><td align="top" style="font: normal 10px
Georgia"> <br>Lindenstrasse 11<br /> 14467 Potsdam<br /><br>If you are
a dreamer, come in. <br>If you are a dreamer, a wisher, a liar, <br>A
hope-er, a pray-er, a magic bean buyer,<br>'
html+='If you are a pretender, come sit by my fire, <br> For we have
some flax golden tales to spin.<br><br><br><br>'
html+='<br><img src="http://www.linden11.org/images/
linden_small.jpg"></td><td><img src="http://www.linden11.org/wp/wp-
content/uploads/2009/02/linden11_previously.jpg" width="188"
height="250" /></td></tr></table>'
html += '</div>'
var point = new GLatLng( 52.4005282934208,13.051934843477);
// dann der marker selbst
var linden11 = createMarker(point,html);
// und noch der overlay
map.addOverlay(linden11);
var html2 = '<div style="font: normal 10px Georgia ">'
html2+='<h5> Lapis Lazuli</h1><br><img src="http://
farm3.static.flickr.com/2273/2216801609_d38064e5ce_m.jpg"></h5><br>'
html2+=' Benkertstr. 21, 14467 Potsdam <br> 0331 2802371 <br> <a
href="http://www.lapis-lazuli-potsdam.de";>link</a>'
var point2 = new GLatLng(52.4033901426831,13.0603931789904);
var lapis = createMarker(point2, html2);
map.addOverlay(lapis);
var html3 ='<h5>PIK Potsdam, Aussenstelle Pappelallee</h5><br>'
html3+='<img src="http://daten.verwaltungsportal.de/fotos/
mandate-39034-fotoeins.jpg">'
var point3 = new GLatLng(52.4130411999803,13.0354612809726);
var pappelallee = createMarker(point3,html3);
map.addOverlay(pappelallee);
// kml overlays
var geoXml;
var toggleState = 1;
geoXml = new GGeoXml("http://maps.google.de/maps/ms?
ie=UTF8&hl=de&msa=0&output=georss&msid=112623228804849562156.0004647419947cec5cc5c");
map.addOverlay(geoXml);
//panoramio = new GGeoXml("http://www.panoramio.com/kml/?
user=1976779");
// map.addOverlay(panoramio);
wikipedia = new GGeoXml("http://ws.geonames.org/
findNearbyWikipediaRSS?postalcode=14467&country=DE&radius=10");
map.addOverlay(wikipedia);
}
}
</script>
<script type="text/javascript"
src="http://www.panoramio.com/map/
get_panoramas.php?
order=upload_date&set=1976779&from=0&to=20&minx=12&miny=50&maxx=14&maxy=53&callback=storePhotos&size=small"></
script>
</head>
<div id="map"> <body onload=" initialize(); load()"
onunload="GUnload()">
</div>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
