DevProTalk - Promena infowindowa u gugl mapi

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