Google Maps using EXT.NET

  1. #1

    Google Maps using EXT.NET

    Hi friends, im trying to add a google map in a Ext.net panel, and i can see that everyone are using Ext.Net.UX, but i can't get this DLL, and i can't get to start a google map with ext.net, if someone can help me, please show me step by step how to add a google map dinamically to ext.net panel

    Part of the code c# that im using is this:

     //codeBehind
     panelCentro = new Ext.Net.Panel("Mapa");
     panelCentro.ID = "panelMapa";
     panelCentro.Html = "<div id='map'></div>";
     panelCentro.Region = Ext.Net.Region.Center;
     this.Items.Add(panelCentro);
    
     panelCentro.Listeners.AfterRender.Fn = "iniciaMapa()";
    iniciaMapa() is a function in javascript tryng to start a map in 'map' div

    Thanks
  2. #2
    Quote Originally Posted by nailuj-nallim View Post
    i can see that everyone are using Ext.Net.UX, but i can't get this DLL, and i can't get to start a google map with ext.net
    Hi,

    You need to download all Ext.Net sources (not just dlls) and build the solution, then you will get Ext.Net.UX dlls.
  3. #3

    What is the best way?

    Quote Originally Posted by Daniil View Post
    Hi,

    You need to download all Ext.Net sources (not just dlls) and build the solution, then you will get Ext.Net.UX dlls.
    Hi Daniil, thanks for your reply, one question more... what is the best way to use it, like a DLL? or like a project template?

    Thank you again...
  4. #4
    Not sure that I understand you. Please clarify.
  5. #5
    Hi Daniil, now im working with Ext.Net.UX, thank you again!
  6. #6
    Hola, tambien se puede usar directamente el api de google en <ext:Xscript> tal como te indica la documentacion de google maps
    con la difrerencia de que en vez de usar un div usas un <ext:panel>. Mirar el siguiente codigo para ver como usarlo:
    <ext:ResourcePlaceHolder runat="server" Mode="Script"></ext:ResourcePlaceHolder>
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMNfNVaqfAe9FKyfKhfBExSs9LrIQ7GOuBeSnaddg05sRmEBxQ" type="text/javascript"></script>
     
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    
     <ext:XScript runat="server">
            <script type="text/javascript"> 
               var CrearMarker= function (overlay,latlng,map) {               
                    if (latlng) {                    
                        map.addOverlay(new GMarker(latlng))
                    }
                }
    
                var IniciarMapa = function () {
                    if (GBrowserIsCompatible()) {                    
                        var map = new GMap2(document.getElementById("map"));
                        map.setCenter(new GLatLng(-11.939295, -77.064984), 17);
                        map.setMapType(G_HYBRID_MAP);
                        map.setUIToDefault();
                        map.enableRotation();
                        GEvent.addListener(map, "click", function(overlay,latlng){CrearMarker(overlay,latlng,map)});
                    }
                }           
    
                var CargarMapa = function () {
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=IniciarMapa";            
                    //Se esta forzando a que primero cargue el Api de Google, luego recien lo renderize, llamando a la funcion IniciarMapa
                    document.body.appendChild(script);           
                }
      </script>
    </ext:XScript> 
    
    <ext:Viewport runat="server" Layout="BorderLayout" >
      <Items>
         <ext:Panel runat="server" ID="map" Region="Center" StyleSpec="width: 100%; height: 100%; " Frame="false" Layout="FitLayout" MonitorResize="true" /> 
      </Items>
      <Listeners>
         <AfterRender Handler="CargarMapa();" />
       </Listeners>
    </ext:Viewport>

    Este codigo crea un mapa con el evento click en el, para crear marker donde se le haga click. Como veras se usa javascript del api de google sin necesidad de agregar la referencia: Ext.Net.UX.dll, si quieres agregarle mas cosas al mapa lo unico que hay que hacer es usar las funciones que el api de google proporciona.

    Saludos

    David Escalante
    Last edited by davidsec; Mar 05, 2012 at 4:19 PM.

Similar Threads

  1. Google Maps in Ext.panel
    By bayoglu in forum 1.x Help
    Replies: 1
    Last Post: Jun 21, 2012, 8:44 PM
  2. Ext.net and Google charts
    By cerqueira81 in forum 2.x Help
    Replies: 0
    Last Post: May 02, 2012, 1:06 PM
  3. Google gauge and Ext.Net
    By UserClarion in forum 1.x Help
    Replies: 2
    Last Post: Dec 22, 2011, 2:13 PM
  4. How to Adding Google Maps in Panel or Window
    By anderpass in forum 1.x Help
    Replies: 3
    Last Post: Nov 06, 2009, 11:43 AM
  5. Isn't there a Google Map Panel somewhere?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2009, 8:43 PM

Tags for this Thread

Posting Permissions