Google Maps in Ext.panel

  1. #1

    Google Maps in Ext.panel

    Hello forum. I am trying to add Google Maps functionality to my application. I can do it by preparing a seperate .aspx and giving it in AutoLoadURL property of the panel. I need to do it another way since I want to stay in the same .aspx with GUI.

    Standard google maps init:

     <head>
        <title></title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var myOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(-34.1, 150.1),
                    map: map,
                    title: "Hello World!"
                });
            }
        </script>
      </head>
    If I use Google Maps API like below, it works.

     
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>    
     </body>
    If I use like below, it does not show the map. What is wrong with using the div element in Panel's Content?

      <body onload="initialize()">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        <ext:Panel runat="server" ID="p1" Layout="FitLayout" Height="500">
        <Content>
            <div id="map_canvas" style="width:100%; height:100%"></div>
        </Content>
        </ext:Panel>    
      </body>
  2. #2
    Hi,

    I think you just need to move your call to .initialize() into the <AfterRender> Listener of the Panel.

    The problem with calling during the Page 'onload' is that the Panel is probably not rendered at that point. The 'onload' event is fired too early in the Component/Panel lifecycle.

    Here's a simple code sample demonstrating configuring the <AfterRender> Listener.

    Example

    <ext:Panel runat="server" Title="Example" Height=500">
        <Listeners>
            <AfterRender Handler="initialize();" />
        </Listeners>
    </ext:Panel>
    Hope this helps.
    Geoffrey McGill
    Founder

Similar Threads

  1. Replies: 0
    Last Post: Jun 18, 2012, 7:50 AM
  2. Google Maps using EXT.NET
    By nailuj-nallim in forum 1.x Help
    Replies: 5
    Last Post: Mar 05, 2012, 4:01 PM
  3. [CLOSED] Tab Panel Not Rendering In Google Chrome
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 11, 2010, 8:23 AM
  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