Hello,

I tried to make a track with some polylines but it doesn't work.
Can anybody help me?

I have taken an example from EXTJS and added some records, but what i have done wrong?

gmap.js
Code:
/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */


Ext.onReady(function(){

    var mapwin;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!mapwin){

            mapwin = new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                width:400,
                height:400,
                x: 40,
                y: 60,
                items: {
                    xtype: 'gmappanel',
                    region: 'center',
                    zoomLevel: 14,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                        marker: {title: 'Fenway Park'}
                    },
                    markers: [{
                        lat: 42.339641,
                        lng: -71.094224,
                        marker: {title: 'Boston Museum of Fine Arts'},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert('Its fine', 'and its art.');
                            }
                        }
                    },{
                        lat: 42.339419,
                        lng: -71.09077,
                        marker: {title: 'Northeastern University'}
                    }],

                    //DE: Beispiel wie ein Track-Array aussehen sollte (grob, nur Koordinaten)
                    //EN: example how an array of tracks should look like (just coordinates)
                    tracks: [{
                        lat: [42.339641,52.339641],
                        lng: [-71.09077,-61.09077]
                    },{
                        lat: [62.339641,52.339641],
                        lng: [-51.09077,-61.09077]
                    }]
                }
            });
            
        }
        
        mapwin.show();
        
    });
    
 });
Ext.ux.GMapPanel.js
Code:
/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/**
 * @author Shea Frederick
 */

Ext.namespace('Ext.ux');

/**
 *
 * @class GMapPanel
 * @extends Ext.Panel
 */
Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {

    //DE: Initialisieren der Karte, Schritt 1
    //EN: initialize the map, step 1
    initComponent: function() {

        var defConfig = {
            plain: true,
            zoomLevel: 3,
            yaw: 180,
            pitch: 0,
            zoom: 0,
            gmapType: 'map',
            border: false
        };

        Ext.applyIf(this, defConfig);

        Ext.ux.GMapPanel.superclass.initComponent.call(this);

    },

    //DE: Initialisieren der Karte, Schritt 2
    //EN: initialize the map, step 2
    afterRender: function() {

        var wh = this.ownerCt.getSize();
        Ext.applyIf(this, wh);

        Ext.ux.GMapPanel.superclass.afterRender.call(this);

        if (this.gmapType === 'map') {
            this.gmap = new GMap2(this.body.dom);
        }

        if (this.gmapType === 'panorama') {
            this.gmap = new GStreetviewPanorama(this.body.dom);
        }

        if (typeof this.addControl == 'object' && this.gmapType === 'map') {
            this.gmap.addControl(this.addControl);
        }

        if (typeof this.setCenter === 'object') {
            if (typeof this.setCenter.geoCodeAddr === 'string') {
                this.geoCodeLookup(this.setCenter.geoCodeAddr);
            } else {
                if (this.gmapType === 'map') {
                    var point = new GLatLng(this.setCenter.lat, this.setCenter.lng);
                    this.gmap.setCenter(point, this.zoomLevel);
                }
                if (typeof this.setCenter.marker === 'object' && typeof point === 'object') {
                    this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear);
                }
            }
            if (this.gmapType === 'panorama') {
                this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat, this.setCenter.lng), {
                    yaw: this.yaw,
                    pitch: this.pitch,
                    zoom: this.zoom
                });
            }
        }

        GEvent.bind(this.gmap, 'load', this,
        function() {
            this.onMapReady();
        });

    },

    //DE: auszufuehrende Funktionen wenn Karte bereit ist
    //EN: call functions if map is ready
    onMapReady: function() {
        this.addMarkers(this.markers);
        this.addTracks(this.tracks);
        this.addMapControls();
        this.addOptions();
    },

    //DE: Funktion wenn Kartengroesse veraendert wird
    //DN: function if map is resized
    onResize: function(w, h) {

        if (typeof this.getMap() == 'object') {
            this.gmap.checkResize();
        }

        Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);

    },

    //DE: Kartengroesse setzen
    //EN: set the size of the map
    setSize: function(width, height, animate) {

        if (typeof this.getMap() == 'object') {
            this.gmap.checkResize();
        }

        Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);

    },

    //DE: Karte auswaehlen
    //EN: get the map
    getMap: function() {

        return this.gmap;

    },

    //DE: Kartenmitte auslesen
    //EN: get the center of the map
    getCenter: function() {

        return this.getMap().getCenter();

    },

    //DE: Koordinaten der Kartenmitte auslesen
    //EN: get the center coordinates of the map
    getCenterLatLng: function() {

        var ll = this.getCenter();
        return {
            lat: ll.lat(),
            lng: ll.lng()
        };

    },

    //DE: Funktion zum verarbeiten mehrerer Marker
    //EN: function to process multiple markers
    addMarkers: function(markers) {

        if (Ext.isArray(markers)) {
            for (var i = 0; i < markers.length; i++) {
                var mkr_point = new GLatLng(markers[i].lat, markers[i].lng);
                this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
            }
        }

    },

    //DE: Funktion zum Verarbeiten einzelnen Marker
    //EN: function to process single markers
    addMarker: function(point, marker, clear, center, listeners) {

        Ext.applyIf(marker, G_DEFAULT_ICON);

        if (clear === true) {
            this.getMap().clearOverlays();
        }
        if (center === true) {
            this.getMap().setCenter(point, this.zoomLevel);
        }

        var mark = new GMarker(point, marker);
        if (typeof listeners === 'object') {
            for (evt in listeners) {
                GEvent.bind(mark, evt, this, listeners[evt]);
            }
        }
        this.getMap().addOverlay(mark);

    },

    //DE: Funktion um mehrere Tracks zu verarbeiten
    //EN: function to process multiple tracks
    addTracks: function(tracks) {

        //DE: als Quelle muss ein Array vorhanden sein
        //EN: the source has to be an array
        if (Ext.isArray(tracks)) {

            //DE: jeder Track wird einzeln verarbeitet --> for-Schleife
            //EN: process each track separately --> for-loop
            for (var i = 0; i < tracks.length; i++) {

                //DE: die Koordinaten muessen auch in Arrays angegeben sein
                //EN: the coordinateshas to be arrays too
                if (Ext.isArray(tracks[i].lat)) {

                    var trk_line = new GPolyline;
                    var trk_points = new Array();

                    //DE: extrahieren der Koordinaten
                    //EN: extract the coordinates
                    var latarr = String(tracks[i].lat);
                    var lngarr = String(tracks[i].lng);
                    var lat = latarr.split(",");
                    var lng = lngarr.split(",");

                    //DE: zusammenfuegen der Koordinaten zu einem Array aus GLatlng-Objekten
                    //EN: create an array of GLatLng objects
                    for (var k = 0; k < lat.length; k++) {
                        var trk_point = new GLatLng(lat[k], lng[k]);
                        trk_points.push(trk_point);
                    }
                }

                //DE: zeichnen des Tracks
                //EN: draw the Track
                this.addTrack(trk_points, tracks[i].trkname, tracks[i].color, tracks[i].width, false, tracks[i].setCenter, tracks[i].listeners);
            }
        }

    },

    //DE: Funktion zum Verarbeiten einzelner Tracks
    //EN: function to process single tracks
    addTrack: function(track, trkname, color, width, clear, center, listeners) {

        Ext.applyIf(track);

        //DE: Standardwerte wenn nichts eingestellt ist
        //EN: set standard if there is nothing set
        if (color === '') {
            color = '#FF0000';
        }
        if (width === '') {
            width = '6';
        }

        //DE: alle Objekte loeschen und nur den aktuellen Track zeichen
        //EN: delete everything and draw the the current track
        if (clear === true) {
            this.getMap().clearOverlays();
        }

        //DE: die Karte auf den Track zentrieren (kopiert von addMarker und noch nicht veraendert)
        //EN: center the map on the track (copied from addMarker and not yet modified)
        //if (center === true) {
        //    this.getMap().setCenter(point, this.zoomLevel);
        //}
        //DE: erzeuge ein neues GPolyline-Objekt
        //EN: create a new GPolyline object
        var line = new GPolyline(track, color, width);

        //DE: Listeners fuer den Track (kopiert von addMarker und noch nicht veraendert)
        //EN: listeners for the track (copied from addMarker and not yet modified)
        //if (typeof listeners === 'object'){
        //    for (evt in listeners) {
        //        GEvent.bind(mark, evt, this, listeners[evt]);
        //    }
        //}
        //DE: hinzufuegen des Tracks zur Karte, hier tritt der Fehler "c.redraw is not a function" auf
        //EN: add the track to the map, here the error "c.redraw is not a function" occurs
        this.getMap().addOverlay(track);

    },

    //DE: mehrere Steuerelemente zur Karte hinzuf├╝gen
    //EN: add multiple controls to the map
    addMapControls: function() {

        if (this.gmapType === 'map') {
            if (Ext.isArray(this.mapControls)) {
                for (i = 0; i < this.mapControls.length; i++) {
                    this.addMapControl(this.mapControls[i]);
                }
            } else if (typeof this.mapControls === 'string') {
                this.addMapControl(this.mapControls);
            } else if (typeof this.mapControls === 'object') {
                this.getMap().addControl(this.mapControls);
            }
        }

    },

    //DE: ein einzelnes Steuerelement zur Karte hinzuf├╝gen
    //EN: add a single control to the map
    addMapControl: function(mc) {

        var mcf = window[mc];
        if (typeof mcf === 'function') {
            this.getMap().addControl(new mcf());
        }

    },

    //DE: Konfiguration der Karte mit mehreren Optionen
    //EN: configuration of the map with multiple options
    addOptions: function() {

        if (Ext.isArray(this.mapConfOpts)) {
            var mc;
            for (i = 0; i < this.mapConfOpts.length; i++) {
                this.addOption(this.mapConfOpts[i]);
            }
        } else if (typeof this.mapConfOpts === 'string') {
            this.addOption(this.mapConfOpts);
        }

    },

    //DE: Konfiguration der Karte mit einer einzelnen Option
    //EN: configure the map with a single option
    addOption: function(mc) {

        var mcf = this.getMap()[mc];
        if (typeof mcf === 'function') {
            this.getMap()[mc]();
        }

    },

    //DE: eine einzelne Adresse in Koordinaten umwandeln
    //EN: get the coordinates of an address
    geoCodeLookup: function(addr) {

        this.geocoder = new GClientGeocoder();
        this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));

    },

    //DE: eine einzelne Adresse zur Karte hinzufuegen
    //EN: add an address to the map
    addAddressToMap: function(response) {

        if (!response || response.Status.code != 200) {
            Ext.MessageBox.alert('Error', 'Code ' + response.Status.code + ' Error Returned');
        } else {
            place = response.Placemark[0];
            addressinfo = place.AddressDetails;
            accuracy = addressinfo.Accuracy;
            if (accuracy === 0) {
                Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
            } else {
                if (accuracy < 7) {
                    Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level ' + accuracy + ' Accuracy (8 = Exact Match, 1 = Vague Match)');
                } else {
                    point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
                    if (typeof this.setCenter.marker === 'object' && typeof point === 'object') {
                        this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear, true, this.setCenter.listeners);
                    }
                }
            }
        }

    }

});

Ext.reg('gmappanel', Ext.ux.GMapPanel);
gmap.html
Code:
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta http-equiv="expires" content="0">
        <title>
            GMap Window Example
        </title>
        <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"
        />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../ext/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="../ext/ext-all.js">
        </script>
        <!-- GMaps API Key that works for www.extjs.com -->
        <!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUCG2rlIeVFJ07rCgVUYjhhSVbRpeAZk72H9nRSWIwLg0s1ul-BRlbCt360qbQumadan9ZlGxlCWzqg"
        type="text/javascript"></script>-->
        <!-- GMaps API Key that works for localhost -->
        <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A"
        type="text/javascript">
        </script>
        <script src="Ext.ux.GMapPanel.js">
        </script>
        <script src="gmap.js">
        </script>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../ext/examples/shared/examples.css"
        />
        <style type="text/css">
            .x-panel-body p { margin:10px; font-size:12px; }
        </style>
    </head>
    
    <body>
        <script type="text/javascript" src="../ext/examples/shared/examples.js">
        </script>
        <!-- EXAMPLES -->
        <div id="container">
    </body>

</html>
(Sorry, my english is not the best!)