Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Google Map – Add Markers using ExtJS API


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',
				maximizable:true,
				minimizable:true,
                width:1024,
                height:786,
                x: 40,
                y: 60,
                items: {
                    xtype: 'gmappanel',
                    zoomLevel: 14,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '1 Church St, Richmond, Victoria, 3121',
                        marker: {title: 'Branch Office'}
                    },
                    markers: [{
                        lat: -37.81748164010962,
                        lng: 144.99946296215057,
                        marker: {title: 'Richmond Police Station'},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert('Richmond', 'Richmond Police Station');
                            }
                        }
                    },{
                        lat: -37.82184477198719,
                        lng: 144.99804139137268,
                        marker: {title: 'Richmond Church'},
						 listeners: {
                            click: function(e){
                                Ext.Msg.alert('Richmond', 'Richmond Church');
                            }
                        }
                    }]
                }
            });
            
        }
        
        mapwin.show();
        
    });
    
 });

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>GMap Window Example</title>
<link rel=”stylesheet” type=”text/css” href=”../../resources/css/ext-all.css” />

<!– GC –>
<!– LIBS –>
<script type=”text/javascript” src=”../../adapter/ext/ext-base.js”></script>
<!– ENDLIBS –>

<script type=”text/javascript” src=”../../ext-all.js”></script>

<!– GMaps API Key that works for http://www.extjs.com –>
<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRRadLUjZPtnrRT4mXZqcP4UUH-2OxREmPm3GpN_NHsHuvuHd-QKI4YoRg&#8221; 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=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w&#8221; type=”text/javascript”></script>–>

<script src=”../ux/GMapPanel.js”></script>
<script src=”gmap.js”></script>

<!– Common Styles for the examples –>
<link rel=”stylesheet” type=”text/css” href=”../shared/examples.css” />

<style type=”text/css”>
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type=”text/javascript” src=”../shared/examples.js”></script><!– EXAMPLES –>

<h1>GMap Window</h1>
<p>This example shows how to create an extension and utilize an external library.</p>
<input type=”button” id=”show-btn” value=”Gimme a Map” /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href=”../ux/GMapPanel.js”>GMapPanel.js</a> and <a href=”gmap.js”>gmap.js</a> for the full source code.</p>

</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: