<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2BR5Ltrn1m4M
P2hliyyWcC1AqLxZ3A' type='text/javascript'></script>
<script type="text/javascript" src="http://gmapsapi.com/examples/075/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<style type="text/css">
#okno
{
position: absolute;
margin-left: -141px;
}
#okno .stopka
{
display: block; width: 286px;
background: url(http://gmapsapi.com/examples/075/dol.png) repeat-x 30px 0;
padding: 0;
margin: 0;
height: 46px;
}
#okno div.tresc
{
border: 1px solid rgb(181,181,181);
border-bottom: 0;
background: url(http://gmapsapi.com/examples/075/srodek.png) repeat-y white;
}
#okno h3
{
display: block;
margin: 0;
padding: 4px;
width: 220px;
font-family: Arial;
font-size: 14px;
float: left;
margin-left: 7px;
border-bottom: 1px solid #ededed;
}
#okno p
{
clear: right;
}
#okno .close
{
border: 1px solid red;
float: right;
margin: 4px 4px 0 0;
padding: 0;
cursor: pointer;
}
#okno p
{
display: block;
margin: 0 0 5px 32px;
font-family: Arial;
padding: 4px;
font-size: 11px;
color: #333;
text-align: justify;
}
#okno .ikona
{
float: left;
width: 20px;
margin: 3px 0 0 5px;
background-repeat: no-repeat;
height: 32px;
}
</style>
</head>
<body onunload='GUnload()'>
<script type='text/javascript'>
<!--
var mapa;
var okno;
var ikona1 = new GIcon(G_DEFAULT_ICON,'admin.jpg');
var markery_wspolrzedne = [
new GLatLng(50.480287,17.335296)
]; // współrzędne przykładowych markerów
var markery_ikony = [ikona1];
var markery_opcje = [
{tytul:'Marker bez przycisku X', przyciskX: true, ikona:true}
]; // opcje okien dla poszczególnych markerów
var markery_opisy = [
'<a class=grouped_elements rel=group1 href=a.jpg>hhh</a>'
]; // opisy markerów
// prototyp funkcji otwierającej okno z informacjami
GMarker.prototype.otworzOkno = function(html,opcje_uzytkownika)
{
var punkt = this.getPoint();
var opcje =
{
przyciskX: true,
tytul: false,
ikona: true
}; // domyślne opcje (mogą zostać nadpisane opcjami użytkownika)
if(opcje_uzytkownika)
$.extend(opcje,opcje_uzytkownika);
var tytul = (opcje.tytul ? opcje.tytul : 'Informacje o markerze');
var przyciskX = (opcje.przyciskX ? true : false);
var ikona = (opcje.ikona ? true : false);
var ikonaURL = this.getIcon().image;
$('#okno').fadeOut(500, function()
{
okno.latlng = punkt;
okno.zmienZawartosc(html);
if(tytul)
{
okno.zmienTytul(tytul);
$('#okno h3').css('display','block');
}
else
{
$('#okno h3').css('display','none');
}
if(ikona)
$('#okno .ikona').css('visibility','visible');
else
$('#okno .ikona').css('visibility','hidden');
$('#okno .ikona').css('background-image','url('+ikonaURL+')');
if(przyciskX)
$('#okno .close').css('display','block');
else
$('#okno .close').css('display','none');
okno.redraw(true);
$('#okno').fadeIn(500);
});
}
function Okno()
{
this.latlng = new GLatLng(50.480287,17.335296);
};
Okno.prototype = new GOverlay();
Okno.prototype.zmienZawartosc = function(html)
{
$('#okno>.tresc>p.tresc').html(html);
}
Okno.prototype.zmienTytul = function(html)
{
$('#okno>.tresc>h3').html(html);
}
Okno.prototype.pokaz = function()
{
$('#okno').fadeIn(500);
}
Okno.prototype.ukryj = function()
{
$('#okno').fadeOut(500);
}
Okno.prototype.initialize = function(mapa)
{
var div_okno = $('<div />');
var div_stopka = $('<div />');
var div_tresc = $('<div />');
var div_ikona = $('<div />');
var img_zamknij = $('<img />');
var h3 = $('<h3 />');
var p_tresc = $('<p />');
$(div_okno).attr('id','okno').css('display','none');
$(div_tresc).attr('class','tresc');
$(div_ikona).attr('class','ikona').attr('src','http://maps.gstatic.com/intl/pl_ALL/mapfiles/marker.png');
$(img_zamknij).attr('class','close').attr('src','http://gmapsapi.com/examples/075/x.gif').attr('alt','x').click(function() { okno.ukryj(); });
$(h3).html('Informacje o markerze');
$(p_tresc).attr('class','tresc');
$(div_stopka).attr('class','stopka');
$(div_ikona).appendTo($(div_tresc));
$(h3).appendTo($(div_tresc));
$(img_zamknij).appendTo($(div_tresc));
$(p_tresc).appendTo($(div_tresc));
$(div_tresc).appendTo($(div_okno));
$('<br />').css('clear','both').appendTo($(div_tresc));
$(div_stopka).appendTo($(div_okno));
$(div_okno).appendTo($(mapa.getPane(G_MAP_FLOAT_PANE)));
this.latlng = mapa.getCenter();
this.mapa = mapa;
this.okno = div_okno;
};
Okno.prototype.remove = function()
{
$(this.okno).remove();
};
Okno
.prototype
.copy = function() {
return new Okno();
};
Okno.prototype.redraw = function(wymus)
{
if (!wymus)
return;
var punkt = mapa.fromLatLngToDivPixel(this.latlng);
$(this.okno).css('top',(punkt.y-$('#okno').height())+'px').css('left',punkt.x+'px');
}
function mapaStart()
{
if(GBrowserIsCompatible())
{
mapa = new GMap2(document.getElementById('mapka'));
mapa.addControl(new GMapTypeControl());
mapa.addControl(new GOverviewMapControl());
mapa.addControl(new GScaleControl());
mapa.addControl(new GLargeMapControl());
mapa.setCenter(new GLatLng(50.480287,17.335296),17,G_NORMAL_MAP);
mapa.hideControls();
GEvent.addListener(mapa, "mouseover", function(){mapa.showControls();});
GEvent.addListener(mapa, "mouseout", function(){mapa.hideControls();});
mapa.enableContinuousZoom();
mapa.enableDoubleClickZoom();
// tworzymy okno i dodajemy je do mapy
okno = new Okno();
mapa.addOverlay(okno);
for(var i=0;i<=0;i++)
dodajMarker(i); // dodanie przykładowych markerów
GEvent.addListener(mapa,'click',function(marker,punkt)
{
if(!marker || !marker.getPoint)
{
okno.ukryj(); // ukrywamy okno, jeśli kliknięto nie w marker
return;
}
else
{
marker.otworzOkno(marker.opis,marker.opcje);
}
});
}
}
function dodajMarker(i)
{
var latlng = markery_wspolrzedne[i];
var opcje = markery_opcje[i];
var opis = markery_opisy[i];
var ikonka = markery_ikony[i];
var marker = new GMarker(latlng,{icon: ikonka});
marker.opcje = opcje;
marker.opis = opis;
mapa.addOverlay(marker);
return marker;
}
$(document).ready(mapaStart);
$("a.grouped_elements").fancybox();
-->
</script>
<div id='mapka' style='width: 600px; height: 350px; border: 1px solid black; background: gray; background: url('http://web4you.com.pl/template/loader.gif'); background-repeat: no-repeat; background-position: center;'></div>
Google Maps JQuery i FancyBox. Problem z obrazkiem
