[CLOSED] GMAP set values from a grid panel

  1. #1

    [CLOSED] GMAP set values from a grid panel

    Hi, Ext.net

    I am having some problems setting gmap vales from a grid.
    In the grid I have Lat, Lng and address. How can I set CenterMarker lat and lng and Marker lat lng and options title on RowSelect Event.

        <ext:GridPanel ID="GridPanelSalesPonits" 
                    runat="server" 
                    Title="Sites" 
                    Region="Center"
                    Margins="5 5 5 5"
                    StripeRows="true"  
                    TrackMouseOver="true">  
         
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ColumnID="SPID" DataIndex="SPID" Header="ID" Groupable="false" Width="50" />                      
                                <ext:Column DataIndex="Address" Header="Address" />            
                                <ext:Column DataIndex="Longitude" Header="Longitude"  Hidden="true"   />                            
                                <ext:BooleanColumn DataIndex="Status" Header="Status" TrueText="Active" FalseText="Inactive"  />                    
                            </Columns>
                        </ColumnModel>                          
                         <SelectionModel>
                           
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >                   
                                <Listeners>                                         
     <RowSelect Handler="buildMap(record); #{SouthPanel}.setTitle('Map for:'+ record.data.Address); SouthPanel.expand(true);SouthPanel.doLayout();" />                                      
                               </Listeners>
                             </ext:RowSelectionModel>                    
                        </SelectionModel>              
                                                    
                    </ext:GridPanel>         
                    <ext:Panel 
                        ID="SouthPanel" 
                        runat="server" 
                        Region="South"             
                        Height="350">
                                  <Items> 
                                    <ux:GMapPanel ID="SaleMap" runat="server" GMapType="Map" ZoomLevel="14" >
                                        <CenterMarker lat="41.33165" lng="19.8318" />
                                        <Markers>
                                            <ux:Marker Lat="41.33165" Lng="19.8318" >
                                                 <Options Title="La Tour Eiffel" />
                                            </ux:Marker>
                                        </Markers>
                                    </ux:GMapPanel>                                
                                  </Items>
                                </ext:Panel>    
                </Items>
    Thank you,
    Last edited by Daniil; Apr 04, 2011 at 9:14 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Unfortunately, we don't provide support for components from Ext.Net.UX package because those ux are out development process of Sencha and Ext.Net teams (those ux are created by community members)
    Also, we don't familiar with GMap API. I suggest to investigate Google Maps API to resolve the issue
  3. #3
    I found it easier to use just the pure javascript GMapPanel from extjs.com here is an example on how I add it to an existing panel using a code behind call. I'm sure it could be changed to use lat and long numbers...

     Ext.Net.ExtNet.Js.Call("addMap", "1600 Pennsylvania Ave NW Washington, DC 20500-0004")
    
      <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script">
        </ext:ResourcePlaceHolder>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script src="Scripts/GMapPanel.js" type="text/javascript"></script>
    
    Install the above in the head of your html
    
    <script type="text/javascript">
      var addMap = function (geoAddress) {
                var tab = Ext.getCmp('gMapPanel');
                tab.setTitle(' Address - ' + geoAddress);
    
                tab.add({
                    id: 'pMap',
                    closable: false,
                    layout: 'Fit',
                    border: true,
                    items: {
                        xtype: 'gmappanel',
                        zoomLevel: 14,
                        gmapType: 'map',
                        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
                        setCenter: {
                            geoCodeAddr: geoAddress,
                            marker: { title: geoAddress }
                        }
                    }
                });
    
                tab.doLayout();
            }
    </script>
  4. #4
    Thnx a lot, ljankowski
    Your code is very helpful,
    Greetings,
    Eaglemobile
  5. #5
    Hi, again

    I am having an error

    GMap2 is not defined
    [Break On This Error] this.gmap = new GMap2(this.body.dom);
    I call this function on grid rowselect

      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >                   
                                <Listeners>                                         
                                      <RowSelect Handler="buildMap(record); SouthPanel.expand(true);"/>                                      
                               </Listeners>
                             </ext:RowSelectionModel>
    javascript function:

    <script type="text/javascript">
                var buildMap = function (record) {
                    var MapPanel = Ext.getCmp('SouthPanel');
                    MapPanel.setTitle('Map for sale point:' + record.data.Town + ', ' + record.data.City);
    
                    MapPanel.add({
                        items: {
                            xtype: 'gmappanel',                   
                            zoomLevel: 14,
                            gmapType: 'map',
                            mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                            mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
                            setCenter: {
                                lat: record.data.Latitude,
                                lng: record.data.Longitude },
                            markers: [{
                                lat: record.data.Latitude,
                                lng: record.data.Longitude,
                                marker: { title: record.data.OutletName },
                                listeners: {
                                    click: function (e) {
                                        Ext.Msg.alert('More Data', 'More Data in Here');
                                    }
                                }
                            }]                 
                       
                        }                   
                    
                    });
                    MapPanel.doLayout();
                };
    </script>
    Panel where I want to add the map is.

         <ext:Panel 
                        ID="SouthPanel" 
                        runat="server" 
                        Region="South"
                        Padding="5" 
                        Split="true" 
                        Border="false" 
                        Collapsible="true" 
                        Title="Map" 
                        Collapsed="true" 
                        Height="350">
                                  <Items> 
                                    <ext:DateField id="test123" runat="server" Hidden="true" />
                                                            
                                  </Items>
                                </ext:Panel>
    Thank you again,
  6. #6
    OK now Gmap2 problem is solved thnx to ljankowski again.
    I downloaded the file GMapPanel3.js
    Now I have some small problems.
    Problem 1-) The map height doesnt fill the hole panel i see just a thin line
    Problem 2-) How can I clear items of the panel because on every click the map added to the panel

    thank you,
  7. #7
    To fit the map inside your panel just make sure it has FitLayout

    Layout="FitLayout"
    I understand you want to change the point based on the location passed. Good question! I actually don't know how to do it myself, but sounds like something I might want to do in the future. When I was first writing this control I really didn't know much about Ext.Net/ExtJS and I still don't hahah!!
    Let me see what I can come up with.

    Kind of figured it out but only using an address. I'm not sure how to do it if you already have the lat and lng.. I think it's something like

    Ext.getCmp('gMap').setCenter({lat: 42.345573,lng: -71.098326});
    but I'm not sure. I hope this helps you out.


    var addMap = function (geoAddress) {
                var tab = Ext.getCmp('gMapPanel');
                var map = Ext.getCmp('gMap') // Gets the ID of the Map
                tab.setTitle(' Address - ' + geoAddress);
    
               // here I check if the gMap exists and if it doesn't then I add the panel and the gmappanel to the center of it.
    
                if (!map) {
                    // Tab doesn't exist, load it
                    tab.add({
                        id: 'pMap',
                        closable: false,
                        layout: 'Fit',
                        border: true,
                        items: {
                            xtype: 'gmappanel',
                            id: 'gMap', // Added an ID for the gMapPanel
                            zoomLevel: 14,
                            gmapType: 'map',
                            mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                            mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
                            setCenter: {
                                geoCodeAddr: geoAddress,
                                marker: { title: geoAddress }
                            }
                        }
                    });
                }
                else 
    {
                     Ext.getCmp('gMap').geoCodeLookup(geoAddress, { title: geoAddress }, false, true, undefined); // update the new address
    }
                }
    
                tab.doLayout();
            }
  8. #8

    OK Solved

    Thnx again and again, ljankowski

    FitLayout worked !!!.

    For the moment all I need is that for every row that is clicked to expand the south panel and display the map regarding lat and lng within the row.
    So on every click i am deleting the items of the panel and recreate them from the beginning, I know it is not correct way but right now it solves my problem.

    Just for general knowledge I am posting the code.
    javascript function:

      <script type="text/javascript">
                 var buildMap = function (record) {
                     var MapPanel = Ext.getCmp('SouthPanel');
                     MapPanel.remove(MapPanel.items.last());
                     MapPanel.setTitle('Map for sale point:' + record.data.Town + ', ' + record.data.City);
                     MapPanel.add({
                         items: {
                             xtype: 'gmappanel',
                             zoomLevel: 14,
                             gmapType: 'map',
                             mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                             mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
                             setCenter: {
                                 lat: record.data.Latitude,
                                 lng: record.data.Longitude
                             },
                             markers: [{
                                 lat: record.data.Latitude,
                                 lng: record.data.Longitude,
                                 marker: { title: record.data.OutletName },
                                 listeners: {
                                     click: function (e) {
                                         Ext.Msg.alert(record.data.OutletName, record.data.SalesRepresentative + '<br />'+ record.data.Town + '<br />'+ record.data.City + '<br />' );
                                     }
                                 }
                             }]
    
                         }
                         
                     });
                     MapPanel.doLayout();
                 };
    </script>

    View:
     <SelectionModel>                       
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >                   
                                <Listeners>                                         
                                      <RowSelect Handler="buildMap(record); SouthPanel.expand(true);"/>                                 
                             </ext:RowSelectionModel>                    
     </SelectionModel>  
    
    
       <ext:Panel 
                        ID="SouthPanel" 
                        runat="server" 
                        Region="South"
                        Padding="5" 
                        Split="true"  
                        Layout="FitLayout"
                        Border="false" 
                        Collapsible="true" 
                        Title="Map" 
                        Collapsed="true" 
                        Height="350">
                                  <Items> 
                                                
                                  </Items>
       </ext:Panel>
    Thank you,

    Eaglemobile
  9. #9

    Google Map problem (how to put it working)?

    Hi.

    I am trying to place a map inside a Window but without success. Can anyone help me?

    <head id="Head1" runat="server">
        <title>GMap - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="Scripts/GMapPanel3.js"></script>
        <script type="text/javascript">
            var showMap = function () {
                new Ext.Window(Ext.apply({
                    renderTo: Ext.getBody(),
                    resizable: false,
                    id: "wGMap",
                    title: "Customer Address - " ,
                    closable: true,
                    closeAction: "close",
                    initCenter: true,
                    draggable: true,
                    modal: true,
                    height: 400,
                    width: 550,
                    items: {
                        xtype: 'gmappanel',
                        zoomLevel: 14,
                        gmapType: 'map',
                        id: 'my_map',
                        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
                        mapControls: [new GSmallMapControl(), 'GMapTypeControl', 'NonExistantControl'],
                        setCenter: {
                            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                            marker: { title: 'Fenway Park' }
                        },
                    }
                })).show();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" ID="ResourceManager1" />
        <ext:Button runat="server" Text="Map" Width="80">
            <Listeners>
                <Click Handler="showMap()" />
            </Listeners>
        </ext:Button>
        </form>
    </body>

Similar Threads

  1. Replies: 0
    Last Post: Jun 18, 2012, 7:50 AM
  2. How to get values from grid panel selected row
    By mehmood in forum 1.x Help
    Replies: 9
    Last Post: Apr 11, 2012, 12:09 PM
  3. Editable Grid Panel Cells Values
    By garag in forum 1.x Help
    Replies: 0
    Last Post: Sep 20, 2011, 3:29 PM
  4. GMAP panel examples
    By fabiomarcos in forum 1.x Help
    Replies: 15
    Last Post: Dec 15, 2009, 12:43 AM
  5. [CLOSED] Grid panel columns is override with the firstrow values
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 30, 2009, 8:59 AM

Tags for this Thread

Posting Permissions