Hajde ovako da probamo da odradimo/izvučemo deo koji se koristi gore, u linku iz prve poruke.
Skini prvo ove dve slike:
http://www.mosne.it/playground/mosne...nfobox_top.png
http://www.mosne.it/playground/mosne...obox_close.png
I snimi ih u npr. folder
images
Kod:
Kôd:
<script src="infobox.js" type="text/javascript"></script>
stavi posle koda kojim, učitavaš Google Maps API, dakle posle
Kôd:
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
Jer su potrebne odatle određenej funkcije da bi kod iz infobox.js fajla radio.
Zatim kod, koji se nalazi unutar load funkcije:
Kôd:
infoWindow = new google.maps.InfoWindow();
zameni sa:
Kôd:
infoWindow = new InfoBox({
content: "loading",
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-150, 5),
zIndex: null,
boxStyle: {
background: "url('images/infobox_top.png') top center no-repeat",
opacity: 1,
color:'#000',
padding: '0',
width: "300px"
},
closeBoxMargin: "16px 4px",
closeBoxURL: "images/infobox_close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
Ovde ćeš videti prve dve slike koje sam pomenuo na početku, pa ti ukoliko ih snimaiš u neki drugi folder, promeni putanje istih.
Zatim deo koda, koji se nalazi unutar funkcije createMarker:
Kôd:
var html = '<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" valign="top"><div align="center">' + name + '</div></td></tr><tr><td width="50%" valign="top"><img src="' + address + '" alt="" width="150" border="0" /><br></td><td width="50%" align="center" valign="middle"><a href="' + totolink + '"><img src="buy_btn.png" width="70" height="30" border="0" /></a></td></tr><tr><td colspan="2" valign="top" bgcolor="#999999"><div align="center">BETA!</div></td></tr></table>';
Zameni sa:
Kôd:
var html = '<div class="m_tooltip"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" valign="top"><div align="center">' + name + '</div></td></tr><tr><td width="50%" valign="top"><img src="' + address + '" alt="" width="150" border="0" /><br></td><td width="50%" align="center" valign="middle"><a href="' + totolink + '"><img src="buy_btn.png" width="70" height="30" border="0" /></a></td></tr><tr><td colspan="2" valign="top" bgcolor="#999999"><div align="center">BETA!</div></td></tr></table></div>';
Dodaj sledeći CSS kod:
Kôd:
.m_tooltip{
position: absolute;
text-align: center;
left: 0;
top: 0;
z-index: -2;
color: #FFFFFF;
float: left;
margin-top: 10px;
padding: 10px;
width: 280px;
border: 1px solid #313436;
text-shadow: 0px 0px 3px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 2px #000; /* FF3.5+ */
-webkit-box-shadow: 0px 1px 2px #000; /* Saf3.0+, Chrome */
box-shadow: 0px 1px 2px #000;
background-image: -webkit-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
background-image: -moz-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
background-image: -moz-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
background-image: -ms-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
background-image: -o-linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
background-image: linear-gradient(top, rgba(31,34,36,.9), rgba(0, 0, 0, 0.7));
}
Ukoliko zeliš i da dodaš markerima animaciju kao u gornjem linku, deo koda, koji nalazi unutar funkcije createMarker:
Kôd:
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
Zameni sa:
Kôd:
google.maps.event.addListener(marker, 'click', function() {
this.setAnimation(google.maps.Animation.DROP);
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
Mislim da je to sve.
Ja sam koristio tvoj kod sa linka:
http://kuponik.adriamart.com/pon.html
Takođe imaš grešku u sinkatsi u ovom delu koji je @webarto pomenuo, i verovatno ne učitavaš eksterni fajl koji je potreban da ti taj deo radio, zatim ne postoji funkcija GUnload koja se učitava na događaj onunload dokumenta (body html tag), u Firefox-u se ne vidi mapa, definiši height ćelije tabele u kojoj se nalazi div sa mapom...
Što se tiče editora kada pišeš poruku na forumu, idi u Korisnička KT (User CP) / Izmenite opcije (Edit Options) / Razne opcije (Miscellaneous Options) / Interface editora poruka (Message Editor Interface) , odnosno link:
http://www.devprotalk.com/profile.php?do=editoptions