Ext 4.2 - Very Simple (Stupid) Gmap - Marker and InfoWindow

by Lawrence Ross

HTML

<script src="http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&amp;sensor=false&amp;dummy=.js"></script>
<script src="http://www.msg360.co.uk/emails/sample/Scripts/infobubble-compiled.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<div id='ext-map'></div>
<div id='directions'></div>

CSS

.x-border-box .reset-box-sizing * {
    box-sizing: content-box;
}

JavaScript

Ext.onReady(function () {
    var el = 'ext-map';
    var api = null;
    var dirSvc = null;
    var dirDsp = null;
    var dirDspArray = [];
    var travelMethod = null;
    var dirPanel = 'directions';
    var w = Ext.create('Ext.Panel', {
        renderTo: el,
        title: 'Gmap',
        height: 600,
        width: 800,
        layout: 'border',
        items: [{
            region: 'west',
            title: 'Directions',
            collapsible: true,
            width: 150,
            items: [{
                xtype: 'textarea',
                id: 'from',
                fieldLabel: 'From',

                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'textarea',
                id: 'to',
                fieldLabel: 'To',

                handler: addInfoWindow // reference to event handler function 
            }, {
                xtype: 'combo',

                width: 150,
                fieldLabel: 'Travel Method',
                id: 'method',
                value: 'DRIVING',
                name: 'Travel Method',
                queryMode: 'local',
                store: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
                displayField: 'title',
                autoSelect: true,
                forceSelection: true,
                matchFieldWidth: true,
                listConfig: {
                    maxHeight: 150
                }


            }, {
                xtype: 'button',
                text: 'Submit',
                handler: findRoute
            }, {
                xtype: 'button',
                text: 'Reset',
                handler: resetFields
            }]
        }, {
            xtype: 'gmappanel',
            region: 'center',
            id: 'mygooglemap',
            cls: 'reset-box-sizing',
            center: new google.maps.LatLng(53.5267, -1.13330),
            mapOptions: {
                zoom: 16,
                mapTypeId:...