Promena infowindowa u gugl mapi

[webarto]

Ti si sve pomješao, ovo je PrototypeJS za ovaj scrollbar... link što si postavio je jQuery plugin koji koristi infobox, i ne razumijem što ne integrišeš to već nešto kuckaš što nema logike...

[Br@nkoR]

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:

<script src="infobox.js" type="text/javascript"></script>

stavi posle koda kojim, učitavaš Google Maps API, dakle posle

<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:

infoWindow = new google.maps.InfoWindow();

zameni sa:

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:

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:

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:

.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:

google.maps.event.addListener(marker, 'click', function() {
  infoWindow.setContent(html);
  infoWindow.open(map, marker);
});

Zameni sa:

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

[AdriaMart]

Neverovatno kako izgleda bolje... Br@nkoR hvala po stoti put!