Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Google Map – Add Markers using ExtJS API


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

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

            mapwin = new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                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');

<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 –>
<script src=”;v=2&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRRadLUjZPtnrRT4mXZqcP4UUH-2OxREmPm3GpN_NHsHuvuHd-QKI4YoRg&#8221; type=”text/javascript”></script>
<!– GMaps API Key that works for localhost –>
<!–<script src=”;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 {
<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>



Comments are closed.

%d bloggers like this: