View Full Version : Google Maps in Ext.panel

Jun 21, 2012, 1:03 PM
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:

<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% }
<script type="text/javascript"
<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!"

If I use Google Maps API like below, it works.

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>

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">
<div id="map_canvas" style="width:100%; height:100%"></div>

Jun 21, 2012, 8:44 PM

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.


<ext:Panel runat="server" Title="Example" Height=500">
<AfterRender Handler="initialize();" />

Hope this helps.