Home/ Questions/Q 8342109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T05:40:35+00:00

here is my code. I want to add dynamicly markers from store or another

  • 0

here is my code. I want to add dynamicly markers from store or another file like .php which include function to add it.

Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
    Ext.applyIf(this,{
        plain: true,
        gmapType: 'map',
        border: false
    });

    this.callParent();
},

afterFirstLayout : function(){
    var center = this.center;
    this.callParent();

    if (center) {
        if (center.geoCodeAddr) {
            this.lookupCode(center.geoCodeAddr, center.marker);
        } else {
            this.createMap(center);
        }
    } else {
        Ext.Error.raise('center is required');
    }

},

createMap: function(center, marker) {
    options = Ext.apply({}, this.mapOptions);
    options = Ext.applyIf(options, {
        zoom: 14,
        center: center,
        mapTypeId: google.maps.MapTypeId.HYBRID
    });
    this.gmap = new google.maps.Map(this.body.dom, options);
    if (marker) {
        this.addMarker(Ext.applyIf(marker, {
            position: center
        }));
    }

    Ext.each(this.markers, this.addMarker, this);
},

addMarker: function(marker) {
    marker = Ext.apply({
        map: this.gmap
    }, marker);

    if (!marker.position) {
        marker.position = new google.maps.LatLng(marker.lat, marker.lng);
    }
    var o =  new google.maps.Marker(marker);
    Ext.Object.each(marker.listeners, function(name, fn){
        google.maps.event.addListener(o, name, fn);
    });
    return o;
},

lookupCode : function(addr, marker) {
    this.geocoder = new google.maps.Geocoder();
    this.geocoder.geocode({
        address: addr
    }, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},

onLookupComplete: function(data, response, marker){
    if (response != 'OK') {
        Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
        return;
    }
    this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
    this.callParent(arguments);
    this.redraw();
},

redraw: function(){
    var map = this.gmap;
    if (map) {
        google.maps.event.trigger(map, 'resize');
    }
}

});

This is index php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../grid/extjs-4.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../extjs-4.1.1./examples/shared/example.css" />

<!-- GC -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=abcde&sensor=false"> </script>

<script type="text/javascript" src="../../extjs-4.1.1/ext-all.js"></script>



<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true">
</script>

<!-- page specific -->

<script type="text/javascript" src="gmap.js"></script>
</head>
   <body>
  <h1>GMap</h1>
      <input type="button" id="show-btn" value="Gimme a Map" /><br /><br />


           </body>

How can i add markers from file or store? I’ve no idea. Please help me.

This is code from gmap.js

Ext.Loader.setConfig({enabled: true});
 Ext.Loader.setPath('Ext.ux', '../ux');
 Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
 ]);

 Ext.onReady(function(){
var mapwin;
Ext.get('show-btn').on('click', function() {
    // create the window on the first click and reuse on subsequent clicks
    if(mapwin) {
        mapwin.show();
    } else {
        mapwin = Ext.create('Ext.window.Window', {
            autoShow: true,
            layout: 'fit',
            title: 'GMap Window',
            closeAction: 'hide',
            width:450,
            height:450,
            border: false,
            x: 40,
            y: 60,
            items: {
                xtype: 'gmappanel',
                center: {
                    geoCodeAddr: 'Baku, Azerbaijan',
                    marker: {title: ''}
                },
                markers: [{
                    lat: 42.339641,
                    lng: -71.094224,
                    title: 'Boston Museum of Fine Arts',
                    listeners: {
                        click: function(e){
                            Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                        }
                    }
                },{
                    lat: 42.339419,
                    lng: -71.09077,
                    title: 'Northeastern University'
                }]
            }
        });

    }
});
});

This code was taken from extjs 4 examples.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. Create a store to load your records into.
    2. Then create a load event for that store, and adapt the code below for your load event.

    My store’s load event.

    // Put the markers on the map after the store loads.
onLoad: function(store, records, success, options) {
    var me = options.scope
    Ext.each(records, function(record) {
        this.addMarker(record.data);
    }, me)
},
    • 0