Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Could it be because you've set the position of the sidePanel as absolute, and as a result the sidepanel div is on top of the map? Try removing the <code>position:absolute</code> from your sidePanel CSS code.</p> <p><strong>Update:</strong></p> <p>The problem was that the width of your map was set to 100%, and your sidepanel was overlayed on top of it. Instead of doing this, I kept your sidepanel at 35% width, added a 2% right margin, and set the map to be 62%. This way, you have the sidepanel and map not overlapping, so when you click on the sidepanel the map will not be affected in any way.</p> <p>See the code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;India&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;v=3.6"&gt;&lt;/script&gt; &lt;script src="http://openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function RenderGoogleMap() { var options = { projection : "EPSG:900913", units : "m", maxResolution : 156543.0339, maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34), displayProjection : new OpenLayers.Projection("EPSG:4326") }; map = new OpenLayers.Map('Map_Screen', options); var gmap = new OpenLayers.Layer.Google("GoogleMap", { 'sphericalMercator' : true, numZoomLevels : 18 }); map.addLayers([ gmap ]); var control = map.addControl( new OpenLayers.Control.Navigation() ); control.activate(); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="RenderGoogleMap();"&gt; &lt;div id="sidePanel" style="float:left;width:35%;margin-right:2%;height:100%;background-color:black;"&gt;&lt;/div&gt; &lt;div id="Map_Screen" style="float:left;width:62%;"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Update 2:</strong></p> <p>If you want the overlay but dont want the side panel to manipulate the map, try this code. It sets the map <code>z-index</code> to -1 and the overlay <code>z-index</code> to 999.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Map&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;v=3.6"&gt;&lt;/script&gt; &lt;script src="http://openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body onload="RenderGoogleMap();"&gt; &lt;div id="Map_Screen" style="z-index: -1;"&gt;&lt;/div&gt; &lt;div id="sidePanel" style="z-index:999;overflow:hidden;position:absolute;top:0px;left:0px;width:35%;height:100%;background-color:black;"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; &lt;script type="text/javascript"&gt; function RenderGoogleMap() { var options = { projection : "EPSG:900913", units : "m", maxResolution : 156543.0339, maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34), displayProjection : new OpenLayers.Projection("EPSG:4326") }; map = new OpenLayers.Map('Map_Screen', options); var gmap = new OpenLayers.Layer.Google("GoogleMap", { 'sphericalMercator' : true, numZoomLevels : 18 }); map.addLayers([ gmap ]); map.zoomTo(3); var control = map.addControl( new OpenLayers.Control.Navigation() ); control.activate(); } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload