Layout problem with Dojo and Google Maps using ArcGIS server

JensOldeland · ‎05-06-2010

Hi could anyone post a working example on the correct display of a simple google map put inside a dojo content-pane?
there must be an issue with height etc.?

best
Jens

AlessioDi_Lorenzo · ‎05-06-2010

Hi,

I created a sample some months ago:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
 <style type="text/css">v\:* {behavior:url(#default#VML);}</style>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="author" CONTENT="Alessio Di Lorenzo">
 <title>DojoMap|Google Maps</title>
 
 <style type="text/css">
  @import "lib/dojo-toolkit/dijit/themes/tundra/tundra.css";
  @import "lib/dojo-toolkit/dojo/resources/dojo.css";
 
                html, body, #main { 
                width: 100%; /* make the body expand to fill the visible window */
                height: 100%;
                overflow: hidden; /* erase window level scrollbars */
              }
             #footer { text-align:right; } 
       </style>
 <script type="text/javascript" src="lib/dojo-toolkit/dojo/dojo.js"
   djConfig="parseOnLoad:true"></script>
 <script type="text/javascript"> 
  dojo.require("dijit.layout.LayoutContainer");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.layout.AccordionPane");
  dojo.require("dijit.Toolbar");
 </script>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA8zASJpG04qTfSZB_OGqCqBSwct0aTsRk-faPwsezEowtUnDlPBR2qGV_K7Q1LfHbsktjT6vdRY34yQ" type="text/javascript"></script>
 <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.4" type="text/javascript" ></script>
 <script type="text/javascript">
    var gmap = null;
 function initialize() {
     gmap = new GMap2(document.getElementById("gmap"));
  var centerat = new GLatLng(42,14);
  gmap.setMapType(G_PHYSICAL_MAP);
  
  gmap.setUIToDefault();
  
  /*var mapOverview = new GOverviewMapControl();
  gmap.addControl(mapOverview);*/

  gmap.setCenter(centerat, 5);
  gmap.enableScrollWheelZoom();
 }
   </script>
</head>
<body class="tundra" onload="initialize();" onunload="GUnload();">
 <div id="main" dojoType="dijit.layout.BorderContainer">
  <div id="header" dojoType="dijit.layout.ContentPane" region="top" style="height:60px;"></div>
  <div id="mapContainer" dojoType="dijit.layout.BorderContainer" region="center">
   <div id="toolbar" dojoType="dijit.Toolbar" region="top" style="height:24px;"></div>
   <div id="gmap" dojoType="dijit.layout.ContentPane" region="center"></div>
   <div id="qres" dojoType="dijit.layout.ContentPane" region="bottom" style="height:180px;"></div>
  </div>
  <div id="tools" dojoType="dijit.layout.AccordionContainer" region="right" style="width:350px;">
   <div id="acc1" dojoType="dijit.layout.AccordionPane" title="Acc-1">
    Dojo Toolkit<br/>
    ArcGIS JavaScript Extension for the Google Maps API
   </div>
   <div id="acc2" dojoType="dijit.layout.AccordionPane" title="Acc-2"></div>
   <div id="acc3" dojoType="dijit.layout.AccordionPane" title="Acc-3"></div>
  </div>
  <div id="footer" dojoType="dijit.layout.ContentPane" region="bottom" style="height:30px;">
   Browser consigliato <a href="http://www.mozilla.com/firefox/" target="_blank">Mozilla Firefox</a>
  </div>
 </div>
</body>
</html>

JensOldeland · ‎05-06-2010

Hi,

many thanks! But I when I try your code there seems to be something wrong:
I tried to adjust the CSS but it did not help. Any idea?

I get something looking like this.

AlessioDi_Lorenzo · ‎05-06-2010

You have to include the dojo-toolkit from different path.
The header of the example refers to the dojo-toolkit directory I have on my local disk

<style type="text/css">
  @import "lib/dojo-toolkit/dijit/themes/tundra/tundra.css";
  @import "lib/dojo-toolkit/dojo/resources/dojo.css";
 
                html, body, #main { 
                width: 100%; /* make the body expand to fill the visible window */
                height: 100%;
                overflow: hidden; /* erase window level scrollbars */
              }
             #footer { text-align:right; } 
       </style>
 <script type="text/javascript" src="lib/dojo-toolkit/dojo/dojo.js"
   djConfig="parseOnLoad:true"></script>

JensOldeland · ‎05-06-2010

Yes ! I was missing this part here:

 <script type="text/javascript" src="lib/dojo-toolkit/dojo/dojo.js"
   djConfig="parseOnLoad:true"></script>

thank you very much!
looks quite pretty!

AlessioDi_Lorenzo · ‎05-06-2010

I'm happy that the example helped 🙂

Take also jQuery and jQuery-UI-Layout in consideration.
Even if you have to use 2 or 3 libraries to obtain something similar to a dojo (or extjs) layout, jQuery looks great and is very light and easy to use.

Ciao

tanyabisen · ‎12-14-2011

Hello,

I am new to this API. I tried using the sample which you have posted above and even after making the changes it doesn't work for me. Basically I am trying to overlay GIS server mapservice on to google maps.

I want to know how do we combine dojo toolkit and google extension as I would not like to use default google infowindow..would love to use use infowindow given in Javascript API samples

Please help me.

Thanks,
Tanya