What's New?

GMap Api Error

  1. #1
    Jan 02, 2009, 9:01 AM

    GMap Api Error

    *Hi every one ,i wish all member merry *christmas.

    I'm working on GMap but when i add a div for map canvas,map don't *be shown correctly.
    I'm sending my code below.Some part of the map was shown but it'll be lost some times.


    <%@ Page Language="C#" AutoEventWireup="true" *CodeFile="Default.aspx.cs" Inherits="_Default" %>


<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
** *<title>Isbak 2009</title>
** *
** *<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow"
** * * *type="text/javascript"></script>


** *<script type="text/javascript">


** * * *function init() {
** * * * * *if (GBrowserIsCompatible()) {
** * * * * * * *var map = new GMap2(&#100;ocument.getElementById("map2"));
** * * * * * * *map.setCenter(new GLatLng(37.4419, -122.1419), 13);
** * * * * * * *map.addControl(new GSmallMapControl());
** * * * * * * *map.addControl(new GOverviewMapControl());
** * * * * *}
** * * * * *else
** * * * * * * *alert('uyumlu degil');
** * * *}
** *</script>


</head>
** *<body &#111;nload="init()" &#111;nunload="GUnload()">
** * * *<form id="form1" runat="server" style="width:100%;height:100%">
**<ext:ViewPort ID="ViewPort1" runat="server">
** * * * * *<Body>
** * * * * * * *<ext:BorderLayout ID="BorderLayout2" runat="server">
** * * * * * * * * *<North Collapsible="True" Split="True">
** * * * * * * * * * * *<ext:Panel ID="Panel1" runat="server" Height="100" Title="North">
** * * * * * * * * * * *</ext:Panel>
** * * * * * * * * *</North>
** * * * * * * * * *<East Collapsible="true" Split="true">
** * * * * * * * * * * *<ext:Panel ID="Panel2" runat="server" Title="East" Width="175">
** * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * *<ext:FitLayout ID="FitLayout1" runat="server">
** * * * * * * * * * * * * * * * * *<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
** * * * * * * * * * * * * * * * * * * *Title="Title">
** * * * * * * * * * * * * * * * * * * *<Tabs>
** * * * * * * * * * * * * * * * * * * * * *<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
** * * * * * * * * * * * * * * * * * * * * *</ext:Tab>
** * * * * * * * * * * * * * * * * * * * * *<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
** * * * * * * * * * * * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * * * * * * * * * *</Body>
** * * * * * * * * * * * * * * * * * * * * *</ext:Tab>
** * * * * * * * * * * * * * * * * * * *</Tabs>
** * * * * * * * * * * * * * * * * *</ext:TabPanel>
** * * * * * * * * * * * * * * *</ext:FitLayout>
** * * * * * * * * * * * * *</Body>
** * * * * * * * * * * *</ext:Panel>
** * * * * * * * * *</East>
** * * * * * * * * *<South Collapsible="true" Split="true">
** * * * * * * * * * * *<ext:Panel ID="Panel7" runat="server" Height="100" Title="South">
** * * * * * * * * * * *</ext:Panel>
** * * * * * * * * *</South>
** * * * * * * * * *<West Collapsible="true" Split="true">
** * * * * * * * * * * *<ext:Panel ID="Panel8" runat="server" Title="West" Width="175">
** * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * *<ext:Accordion ID="Accordion1" runat="server" Animate="true">
** * * * * * * * * * * * * * * * * *<ext:Panel ID="Panel9" runat="server" Border="false" Collapsed="True" Icon="FolderGo"
** * * * * * * * * * * * * * * * * * * *Title="Item 1">
** * * * * * * * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * * * * * *</Body>
** * * * * * * * * * * * * * * * * *</ext:Panel>
** * * * * * * * * * * * * * * * * *<ext:Panel ID="Panel10" runat="server" Border="false" Collapsed="true" Icon="FolderWrench"
** * * * * * * * * * * * * * * * * * * *Title="Item 2">
** * * * * * * * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * * * * * *</Body>
** * * * * * * * * * * * * * * * * *</ext:Panel>
** * * * * * * * * * * * * * * *</ext:Accordion>
** * * * * * * * * * * * * *</Body>
** * * * * * * * * * * *</ext:Panel>
** * * * * * * * * *</West>
** * * * * * * * * *<Center>
** * * * * * * * * * * *<ext:Panel ID="Panel11" runat="server" Title="Center">
** * * * * * * * * * * * * *<Body>
** * * * * * * * * * * * * * * *<ext:FitLayout ID="fitlayout14" runat="server">
** * * * * * * * * * * * * * * * * *<ext:Panel id="pnl1" runat="server" >
** * * * * * * * * * * * * * * * * * * <Body>
** * * * * * * * * * * * * * * * * * * *<div id="map2" style="width:500px;height:500px">

** * * * * * * * * * * * * * * * * * * </Body>
** * * * * * * * * * * * * * * * * *</ext:Panel>
** * * * * * * * * * * * * * * *</ext:FitLayout>
** * * * * * * * * * * * * *</Body>
** * * * * * * * * * * *</ext:Panel>
** * * * * * * * * *</Center>
** * * * * * * *</ext:BorderLayout>
** * * * * *</Body>
** * * *</ext:ViewPort>
*<ext:ScriptManager id="sm1" runat="server"></ext:ScriptManager>
** * * *</form>** * * * * * **
</body>
</html>
  2. #2
    Jan 14, 2009, 9:53 AM

    RE: GMap Api Error


    When the body's onLoad event handler is called, the div in the viewport might not yet be constructed by Ext's javascript. You probably want something that looks more like this:

    <script type="text/javascript">

         

        Ext.onReady(function {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(&#100;ocument.getElementById("map2"));
                map.setCenter(new GLatLng(37.4419, -122.1419), 13);
                map.addControl(new GSmallMapControl());
                map.addControl(new GOverviewMapControl());
            }
            else
                alert('uyumlu degil');
        });
       Ext.onReady

    </script>
    Or you may even have to call it from a loading event fired by the Viewport. In my project, I call the map when data from a store is loaded. You can see it here:

    http://75.101.150.153/CarteProvince.aspx

    source code below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CarteProvince.aspx.cs" Inherits="CarteProvince" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PEAR BD</title>

    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAHxDe2DM8fTqR3KT6JA3uSxSSuuZ8skBYany4yKw3y2LA8edSSxRejZVW6HArmAbyaxBsKh5INBfpeg&amp;sensor=false&amp;hl=fr"
        type="text/javascript"></script>
    <script src="cartes/tiles/maps.js" type="text/javascript"></script>
    <asp:Literal ID="PageParametersScript" runat="server"/>
    <script type="text/javascript">
        var map; // page's map object
        var markers = {}; // map of IDEvalution to markers
        
        var storeLoaded = function() {
            var cx, cy;
            if(showEvalOnLoad)
            {
                var record = MsaStore.getById(showEvalOnLoad);
                cx = record.data.X;
                cy = record.data.Y;
            } 
            else 
            { 
                // get the centroid of the store
                var sumx=0, sumy=0, ptcount=0;
                MsaStore.each(function(record) {
                    if(record.data.X &amp;&amp; record.data.Y) {
                        sumx+=record.data.X;
                        sumy+=record.data.Y;
                        ptcount++;
                    }            
                });
                
                cx = (sumx/ptcount);
                cy = (sumy/ptcount);
            }
        
            // init
            if (GBrowserIsCompatible()) {
                map = new GMap2(MapPanel.body.dom, 
                    { mapTypes: [PEAR.gmaps.getMap('admin', province), G_PHYSICAL_MAP] } );
                map.setCenter(new GLatLng(cy, cx), 8);
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
            }            
            // add points to the google earth map
            MsaStore.each(function(record) {
                var point = new GLatLng(record.data.Y, record.data.X);
                var marker = new GMarker(point,G_DEFAULT_ICON,false);
                marker.idevaluation = record.id;
                map.addOverlay(marker);
                markers[record.id] = marker;
            });
            GEvent.addListener(map, "click", function(overlay, latlng) { 
                if(overlay &amp;&amp; overlay.idevaluation) {
                    var record = MsaStore.getById(overlay.idevaluation);                    
                    if(record) 
                    {
                        MsaGrid.getSelectionModel().selectRecords( [record], false );
                        if(map.getZoom()==8) {
                            map.panTo(overlay.getLatLng());
                        }
                        
                      //  alert(record.data.Nom_Zone);
                        map.openInfoWindowHtml(overlay.getLatLng(), composeInfo(record));
                    }
                }
            });
            if(showEvalOnLoad) {
                var marker = markers[showEvalOnLoad];
                if(marker) 
                    map.openInfoWindowHtml(marker.getLatLng(), composeInfo(MsaStore.getById(showEvalOnLoad)));
            }
        }

        var rowSelectHandler = function(selectionModel, rowIndex, record) 
        {
            var marker = markers[record.id];
            map.openInfoWindowHtml(marker.getLatLng(), composeInfo(record));
        };
        
        function composeInfo(record)
        {
            var html = '<h3>' + record.data.Nom_Zone + '</h3>';
            html+="<p>" + Ext.util.Format.date(record.data.Date, "M Y") + "</p>";
            if(record.data.Pop_Actuelle_M !=null)
                html += '<p>Population couverte: ' + record.data.Pop_Actuelle_M + ' ménages</p>';
            else if(record.data.Pop_Actuelle_H != null)
                html += '<p>Population couverte: ' + record.data.Pop_Actuelle_H + ' habitants</p>';
            
            if(record.data.PDF == 0)
                html += '<p>Le rapport complet d\'évaluation n\'est pas encore disponible.';
            else
                html += '<a href="Rapport.aspx?Evaluation=' + record.id + '" target="_top">Lire</a> ou <a href="Rapport.ashx?Telecharger=true&amp;Evaluation=' + record.id + '" target="_top">télecharger</a> le rapport complet d\'évaluation';
            
            return html;
        }
    </script>
    

</head>
<body &#111;nunload="GUnload()">
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" >
    </ext:ScriptManager>
    
    <asp:ObjectDataSource ID="MsaSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetReportsByProvinceWithXY" TypeName="ReportsAdapter">
        <SelectParameters>
            <asp:QueryStringParameter DefaultValue="50" Name="provinceId" 
                QueryStringField="ProvinceID" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>

    <ext:Store ID="MsaStore" runat="server" DataSourceID="MsaSource">
        <Reader>
            <ext:JsonReader ReaderID="IDEvaluation">
                <Fields>
                    <ext:RecordField Name="Province" />
                    <ext:RecordField Name="Territoire" />
                    <ext:RecordField Name="Pop_Actuelle_M" />
                    <ext:RecordField Name="Pop_Actuelle_H" />
                    <ext:RecordField Name="Date" Type="Date" />
                    <ext:RecordField Name="Nom_Zone" />
                    <ext:RecordField Name="X" />
                    <ext:RecordField Name="Y" />
                    <ext:RecordField Name="PDF" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <Load Fn="storeLoaded" />
        </Listeners>
    </ext:Store>
    <ext:ViewPort ID="ViewPort1" runat="server">
        <Body>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Collapsible="False" Split="False" MaxHeight="30" MinHeight="30" >
                    <ext:Label Html="PEAR BD" runat="server"/>
                </North>
                <West Collapsible="true" Split="true">
                    <ext:GridPanel ID="MsaGrid" runat="server" Title="Evaluations" Frame="true" Width="300"
                        StoreID="MsaStore">
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column DataIndex="Nom_Zone" Header="Zone" Width="150" />
                                <ext:Column DataIndex="Territoire" Header="Territoire" Width="75" />
                                <ext:Column DataIndex="Date" Header="Date" Width="110">
                                    <Renderer Fn="Ext.util.Format.dateRenderer('M-Y')" />
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView ID="GridView1" runat="server" EnableRowBody="true">
                            </ext:GridView>
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                                <Listeners>
                                    <RowSelect Fn="rowSelectHandler" />
                                </Listeners>
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <Listeners>
                        </Listeners>
                    </ext:GridPanel>
                </West>
                <Center>
                    <ext:Panel ID="MapPanel" runat="server" Title="Carte">
                        <Body>
                            <div id="map_canvas" style="width: 300px; height: 300px">
                            

                        </Body>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:ViewPort>
    <pear:GoogleAnalytics runat="server" ID="Tracker" />
    </form>
</body>
</html>




  3. #3
    Mar 02, 2009, 2:32 PM

    RE: GMap Api Error

    Hi abertram

    could you help me with my page i wanna do something like you do too but it sends an error to me or maybe i´m doing something wrong.
  4. #4
    Apr 17, 2009, 10:54 AM

    RE: GMap Api Error

    use this for a quick solution:

    <body &#111;nload="var t = setTimeout('initialize()',1000);">



    not very eligant, but works for me :)


    Update : works in firefox3 &amp; IE 7. Chrome not working, any idea?

Similar Threads

  1. GMap Support
    By pevans360 in forum 2.x Help
    Replies: 3
    Last Post: Aug 09, 2013, 7:39 AM
  2. GMap Marker Draggable
    By bg101 in forum 1.x Help
    Replies: 5
    Last Post: Apr 09, 2012, 9:51 AM
  3. Gmap control in codebehind
    By edudiana in forum 1.x Help
    Replies: 0
    Last Post: Apr 13, 2010, 7:56 PM
  4. GMAP panel examples
    By fabiomarcos in forum 1.x Help
    Replies: 15
    Last Post: Dec 15, 2009, 12:43 AM
  5. Extjs GMAP
    By Filip Beunens in forum 1.x Help
    Replies: 4
    Last Post: May 25, 2009, 3:15 PM

Posting Permissions