[JavaScript]Google map i zaznaczanie obszaru Opcje

[roghatt]

Witam
Mam zrobioną mapę gdzie wyświetla mi z bazy adresy klientów. Z bzy do xml i z xml na mapie.
W xml też jest podany adres markera jakim ma być to zaznaczone na mapie.
Oto JS.

Kod

<script type="text/javascript">  
        <!--
            var mapa;     // obiekt globalny
            var dymek;     // okno z informacjami
                        
            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(52.348763181988076, 18.61083984375);
                var opcjeMapy = {
                    zoom: 6,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.SATELLITE,
                    disableDefaultUI: true
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);             
                dymek = new google.maps.InfoWindow();
                
                wczytajMarkery();

            }  
            
            function wczytajMarkery()
            {
                jx.load('klienci/wczytaj.php', function(xml)
                {
                    var markery = xml.getElementsByTagName("marker");
                    for(var i=0; i<markery.length; i++)
                    {
                        var lat            =    parseFloat(markery[i].attributes.getNamedItem("lat").nodeValue);
                        var lon            =    parseFloat(markery[i].attributes.getNamedItem("lng").nodeValue);
                        var ikona_url    =    markery[i].attributes.getNamedItem("ikona").nodeValue;
                        var nazwa        =    markery[i].attributes.getNamedItem("klient").nodeValue;
                        var marker        =    dodajMarker(lat,lon,ikona_url,nazwa);
                    }
                    alert('Wczytano '+markery.length+' markerów z pliku dane1.xml');
                },'xml','get');
            }
                
            function dodajMarker(lat,lon,ikona_url,nazwa)
            {
                var rozmiar = new google.maps.Size(30,23);  
                var punkt_startowy = new google.maps.Point(0,0);  
                var punkt_zaczepienia = new google.maps.Point(15,12);  
                  
                var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia);
                
                var marker    =    new google.maps.Marker(
                    {
                        position: new google.maps.LatLng(lat,lon),
                        title: nazwa,
                        icon: ikona,
                        map: mapa
                    }
                );
                marker.txt    =    'Klient:<br /><strong>'+nazwa+'</strong>';
                
                google.maps.event.addListener(marker,"click",function()
                {
                    dymek.setPosition(marker.getPosition());
                    dymek.setContent(marker.txt);
                    dymek.open(mapa);
                });
                return marker;
            }
        -->
        </script>

Ale chciałbym to połączyć z JS odpowiadającym za zaznaczanie obszaru na mapie.
Kod tutaj:
http://gmapsapi.com/przyklad/028/02.txt
Ale tam wyświetlane są automatycznie generowane miejsca:

Kod

    
        function dodajMarkery(mapa)
        {
            for(var i=0; i<50; i++)
            {
                var x = parseInt(Math.random()*600);
                var y = parseInt(Math.random()*400);
                var punktXY = new GPoint(x,y);
                var punktLatLng = mapa.fromDivPixelToLatLng(punktXY);
                var marker = new GMarker(punktLatLng,{icon: ikonka, clickable: false});
                marker.ikonka = '/examples/028/off.png';
                mapa.addOverlay(marker);
                markery.push(marker);
            }
        }

i jest różnica w mapaStart() odnośnie wczytania markerów. U mnie jest jeszcze dodajMarker(). Próbowałem zrobić aby zamiast powyższego kodu dodajMarkery wczytywało moje, ale chyba źle to łącze.

zmieniłem to i wyskakuje, że wczytało ileś tam markerów, ale nie wyświetla ich na mapie:/
Coś się mieszają te ikonki. Z bazy czyta ikonkę inną a tutaj są podane inne

Kod

    var mapa;     // obiekt globalny
        var dymek;     // okno z informacjami
        var obszar = null;
        var markery = [];
        var ikonka = new GIcon();
        ikonka.image = 'off.png';
        ikonka.shadow = 'http://maps.google.com/mapfiles/kml/pal4/icon24s.png';
        ikonka.iconSize = new GSize(32,32);
        ikonka.shadowSize = new GSize(59,32);
        ikonka.infoWindowAnchor = new GPoint(16,16);
        ikonka.iconAnchor = new GPoint(16,16);
        
        GMarker.prototype.zmienObraz = function(url)
        {
            this.ikonka = url;
            this.setImage(url);
        }
                
        function zaznaczMarkery(ograniczenie)
        {
            var licznik = 0;
            for(var i=0; i<markery.length; i++)
            {
                if(ograniczenie.contains(markery[i].getPoint()))
                {
                    licznik ++;
                    if(markery[i].ikonka!='on.png')
                        markery[i].zmienObraz('on.png');
                }
                else
                {
                    if(markery[i].ikonka!='off.png')
                        markery[i].zmienObraz('off.png');
                }
            }
            GLog.write('Zaznaczonych jest '+licznik+' markerów');
        }
        
        
        
        function mapaStart()
        {
            
                var mapa = new GMap2(document.getElementById('mapka'));
                mapa.setCenter(new GLatLng(52.348763181988076, 18.61083984375),6,G_SATELLITE_MAP);  
                
                dodajMarkery(mapa);
                GEvent.addListener(mapa,'mousemove',function(p)
                {
                    if(!obszar || !obszar.punkt1)
                        return;
                    obszar.ustawPunktKoncowy(p);
                });
                
                GEvent.addListener(mapa,'click',function(o,p)
                {
                    if(!p)
                        return;
                    if(!obszar)
                    {
                        obszar = new ZaznaczObszar(p);
                        mapa.addOverlay(obszar);
                    }
                    else
                    {
                        zaznaczMarkery(obszar.pobierz());
                        obszar.remove();
                        obszar = null;
                    }
                });
            
        
        }    
        
        

function dodajMarkery(mapa)
        {
                jx.load('klienci/wczytaj.php', function(xml)
                {
                    var markery = xml.getElementsByTagName("marker");
                    for(var i=0; i<markery.length; i++)
                    {
                        var lat            =    parseFloat(markery[i].attributes.getNamedItem("lat").nodeValue);
                        var lon            =    parseFloat(markery[i].attributes.getNamedItem("lng").nodeValue);
                        var ikona_url    =    markery[i].attributes.getNamedItem("ikona").nodeValue;
                        var nazwa        =    markery[i].attributes.getNamedItem("klient").nodeValue;
                        var marker        =    dodajMarker(lat,lon,ikona_url,nazwa);
                    }
                    alert('Wczytano '+markery.length+' markerów z pliku dane1.xml');
                },'xml','get');
        }
        
                        
            function dodajMarker(lat,lon,ikona_url,nazwa)
            {
                var rozmiar = new google.maps.Size(30,23);  
                var punkt_startowy = new google.maps.Point(0,0);  
                var punkt_zaczepienia = new google.maps.Point(15,12);  
                  
                var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia);
            
                
                var marker    =    new google.maps.Marker(
                    {
                        position: new google.maps.LatLng(lat,lon),
                        title: nazwa,
                        icon: ikona,
                        map: mapa
                    }
                );
                marker.txt    =    'Klient:<br /><strong>'+nazwa+'</strong>';
                
                google.maps.event.addListener(marker,"click",function()
                {
                    dymek.setPosition(marker.getPosition());
                    dymek.setContent(marker.txt);
                    dymek.open(mapa);
                });
                return marker;
            }
            
            
            
        
        
        function ZaznaczObszar(punkt1,punkt2)  
        {  
            this.punkt1 = punkt1;  
            this.punkt2 = punkt2 || punkt1;
        };
        
        ZaznaczObszar.prototype = new GOverlay();  

        ZaznaczObszar.prototype.pobierz = function()
        {
            var granica = new GLatLngBounds();
            granica.extend(this.punkt1);
            granica.extend(this.punkt2);
            return granica;
        };
        
        ZaznaczObszar.prototype.ustawPunktKoncowy = function(punkt)
        {
            this.punkt2 = punkt;
            this.redraw(true);
        };
        
        ZaznaczObszar.prototype.initialize = function(mapa)
        {
            this.mapa = mapa;
            var kontener = document.createElement('div');
            kontener.style.border = '2px solid red';            
            kontener.style.position = 'absolute';
            this.mapa.getPane(G_MAP_MAP_PANE).appendChild(kontener);
            this.kontener = kontener;
        };
        
        ZaznaczObszar.prototype.remove = function()
        {
            this.kontener.parentNode.removeChild(this.kontener);
        };

        ZaznaczObszar.prototype.copy = function()
        {
            return new ZaznaczObszar(this.punkt1,this.punkt2);
        };

        ZaznaczObszar.prototype.redraw = function(wymus)
        {
            if (!wymus || !this.punkt2 || !this.punkt1)
                return;
                
            var x1 = this.mapa.fromLatLngToDivPixel(this.punkt1).x;
            var y1 = this.mapa.fromLatLngToDivPixel(this.punkt1).y;
            var x2 = this.mapa.fromLatLngToDivPixel(this.punkt2).x;
            var y2 = this.mapa.fromLatLngToDivPixel(this.punkt2).y;
            
            if(x1>x2)
            {
                var x_temp = x1;
                x1 = x2;
                x2 = x_temp;
            }
            
            if(y1>y2)
            {
                var y_temp = y1;
                y1 = y2;
                y2 = y_temp;
            }
            
            this.kontener.style.left     = x1+'px';
            this.kontener.style.top     = y1+'px';
            this.kontener.style.width    = x2-x1+'px';
            this.kontener.style.height    = y2-y1+'px';
        };