Promena infowindowa u gugl mapi
 

Trenutno radim na sajtu http://kuponik.adriamart.com/pon.html ali pronasao sam ovaj tutorial: http://www.mosne.it/playground/mosne_map/#map_6 i svidelo mi se prikazivanje preko jquery infoboxa koji se tamo koristi umesto standarnih infowindowa pa me zanima sta da promenim u javascript kodu da bih i ja imao infoboxove tj. kako da ukombinujem jquery u javascript i da li je to uopste moguce???

jQuery je Javascript framework, hoce reci - napisan je u JSu.

Ovde koriste ovo:
http://google-maps-utility-library-v.../examples.html
http://google-maps-utility-library-v...reference.html

Ej hvala i ovo je od velike pomoci... ipak infobox izgleda bolje od standardnih infowindova...

probao sam na ovoj strani da uradim ovo sa infoboxom: http://kuponik.adriamart.com/pon1.html ali nesto ne stima...

Vidi li neko gde je greska:

http://kuponik.adriamart.com/pon1.html


var map;
var markers = [];
var locationSelect;
var sidebar;
var customIcons = {

restaurant: {

icon: 'http://kuponik.adriamart.com/zelenimarker.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

},

bar: {

icon: 'http://kuponik.adriamart.com/icon3.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

}

};
var markerGroups = { "restaurant": [], "bar": []};

function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, 22),
zoom: 9,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
sidebar = document.getElementById("sidebar");
}

function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}

function clearLocations() {
infobox.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
sidebar.innerHTML = "";
}

function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'gx.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker") ;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var type = markerNodes[i].getAttribute("type");
var totolink = markerNodes[i].getAttribute("totolink");



var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
var icon = customIcons[type] || {};


createMarker(latlng, name, address, type, totolink);
createSidebar(name, distance, address, i);
bounds.extend(latlng);
}
map.fitBounds(bounds);
});
}

function createMarker(latlng, name, address, type, totolink) {
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>';
var icon = customIcons[type] || {};
var myOptions = {
content: html
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var marker = new google.maps.Marker({
map: map,
icon: icon.icon,
position: latlng
});
if(typeof markerGroups[type] !== 'undefined') {
markerGroups[type].push(marker);
}
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});

var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
});
markers.push(marker);
}

function createSidebar(name, distance, address, num) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/><img src="' + address + '" alt="" width="100" border="0" />';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function(e) {
google.maps.event.trigger(markers[num], 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function(e) {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function(e) {
div.style.backgroundColor = '#fff';
});
sidebar.appendChild(div);
}



function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}

function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if(marker.getVisible()) {
marker.setVisible(false);
infoBox.close();
} else {
marker.setVisible(true);
}
}
}

function doNothing() {}

Zašto nikada ne stavljaš code u odgovarajuće tagove?

Neznam zasto ali kod mene se ova slika koju si prikazao ne pojavljuje :( ?

Nisi učitao jQuery (koji je Javascript framework i ne dolazi uz browser)...

http://www.w3schools.com/quiztest/qu...p?qtest=jQuery

Ucitao infobox.js sam jer ovde ne treba jquery vec infobox.js !

Ucitao infobox.js sam jer ovde ne treba jquery vec infobox.js !

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

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:
stavi posle koda kojim, učitavaš Google Maps API, dakle posle
Jer su potrebne odatle određenej funkcije da bi kod iz infobox.js fajla radio.

Zatim kod, koji se nalazi unutar load funkcije:
zameni sa:
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:
Zameni sa:
Dodaj sledeći CSS kod:

Ukoliko zeliš i da dodaš markerima animaciju kao u gornjem linku, deo koda, koji nalazi unutar funkcije createMarker:
Zameni sa:
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

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