Draw route between two markers

I'm learning how to develop web applications using Ext.js, and I'm using Google Maps API to show a map in my page.

I added two markers for two different locations and I would like to draw a polyline between these two markers, how can I do that?

My code:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCV2QUPhqKB67SnuoQLO573e5N2yIaQiwQ"></script>

    <script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>

</head>

<body></body>

<script type="text/javascript">

    Ext.onReady(function() {
        var w = Ext.create('Ext.window.Window', {

            height: 400,
            width: 600,
            layout: 'fit',
            header: false,
            border: false,
            style: 'padding: 0; border-width: 0;',
            closable: false,
            draggable: false,
            height: Ext.getBody().getViewSize().height,
            width: Ext.getBody().getViewSize().width,
            items: [{
                xtype: 'gmappanel',
                region: 'center',
                cls: 'reset-box-sizing',
                center: new google.maps.LatLng(51.50733,-0.1977981),
                markers: [{
                    lat: 51.50733,
                    lng: -0.1977981,
                    marker:  {title: 'Location 1'},
                    listeners: {
                        click: function(e){
                            Ext.Msg.alert('Its fine', 'and its art.');
                        }
                    }
                },{
                    lat: 53.4083509,
                    lng: -3.0616123,
                    marker: {title: 'Location 2'}
                }],
                mapOptions: {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }]
        });

        w.show();

    });
</script>

</html>

I have been searching for some codes and I found this one that draws a polyline, but it says that "InvalidValueError: setMap: not an instance of Map "

var flightPathCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
];

var flightPath = new google.maps.Polyline({
    path: flightPathCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

flightPath.setMap(w);

Thank you.

Solution

Polyline's setMap method has one argument that is required - an instance of a google map. (Google Maps JS API)

Your polyline code is fine, but when you call setMap you pass the variable w, which I assume is your ExtJS window, when you need to be passing it the actual google map instance. That can be accessed by using the gmap property of the gmappanel class. To get to the gmappanel class from your window, you can use the down method (ExtJS API) by doing gmappanel = w.down('gmappanel')or you can just get it because you know it's the only item that the window contains by doing gmappanel = w.items.first();

Then you can just do gmap = gmappanel.gmap to get the actual google map instance.

So in your second code block, just replace the last line with this:

flightPath.setMap(w.down('gmappanel').gmap);