Home/ Questions/Q 9161943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:05:33+00:00

I have a screen where two things are displayed. A Google street map is

  • 0

I have a screen where two things are displayed.

  1. A Google street map is rendered using Openlayers.
  2. A side panel is rendered to display a list of countries and their annual population growth.

Below code explains the idea. Code is written in HTML.

<body>
 <div id="map" style="z-index:0;"></div>
 <div id="sidePanel" style="position:absolute;
                            top:0px;
                            left:0px;
                            width:30%;
                            height:100%;
                            z-index:1;
                            background-color:black">
 //content in this div will be filled dynamically through ajax call
 </div>
</body>

Everything displayed perfectly. But, when I click on #sidepanel and holding mouse click, if I drag, then #map is receiving the mouse click and ‘Pan Operation’ is occuring on screen.

I dont want ‘#map’ to receive mouseclick when clicked on #sidepanel. Also, when I position mouse over #sidepanel and double click on that div, #map is receiving the double click and Zoom Operation is happening . I want to separate #map and #sidepanel.

I am experiencing this problem only with Firefox and Chrome browsers. IE is working fine for my requirement.
Please suggest some ideas. Thanks for your patience.

HERE IS MY COMPLETE CODE

<html>
<head>
<title>Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="RenderGoogleMap();">
<div id="Map_Screen" style="z-index: -1;"></div>
<div id="sidePanel" style="overflow:hidden;position:absolute;top:0px;left:0px;width:35%;height:100%;background-color:black;"></div>
</body>
</html>
<script type="text/javascript">
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();
    }
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 position:absolute from your sidePanel CSS code.

    Update:

    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.

    See the code:

    <html>
<head>
<title>India</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
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();
    }
</script>
</head>
<body onload="RenderGoogleMap();">
<div id="sidePanel" style="float:left;width:35%;margin-right:2%;height:100%;background-color:black;"></div>
<div id="Map_Screen" style="float:left;width:62%;"></div>
</body>
</html>

    Update 2:

    If you want the overlay but dont want the side panel to manipulate the map, try this code. It sets the map z-index to -1 and the overlay z-index to 999.

    <html>
<head>
<title>Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3.6"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="RenderGoogleMap();">
<div id="Map_Screen" style="z-index: -1;"></div>
<div id="sidePanel" style="z-index:999;overflow:hidden;position:absolute;top:0px;left:0px;width:35%;height:100%;background-color:black;"></div>
</body>
</html>
<script type="text/javascript">
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();
    }
</script>
    • 0