[GIS] OpenLayers – Can’t remove zoom control buttons, other controls simply lay on top

google mapsopenlayers-2

I have a simple OpenLayers script with a Google map as the base layer. By default the map has a + and – zoom control button, which I can't find how to get rid of.

I've added an empty controls array to the map options, but it still appears. If I add any other controls, for example PanZoomBar, it just sits ontop of the + and – buttons, semi-obscuring them. The effect is the same whether I add PanZoomBar in the controls array or with map.addControl.

Here is what it looks like by default:
enter image description here

And with added PanZoomBar:
enter image description here

And here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Map test</title>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="google-v3.js"></script>
    <style type="text/css">
        #map-container { width: 740px; height:770px; float: left }
        #map_canvas { width: 740px; height: 100% }
    </style>
</head>
<body onload='init();'>
<h2>Map Test</h2>

    <div id="map-container">
        <div id="map_canvas"/>    
    </div>    

<script type="text/javascript">
    function init(){

        var map = new OpenLayers.Map({
            div: "map_canvas"
        });

        // Base Layer
        var gmap = new OpenLayers.Layer.Google( 'Googlemap', {
            controls: [],
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            sphericalMercator:true
            //projection: "EPSG:900913",
        });
        map.addLayer(gmap);

        // Center map to center of UK
        var point = new OpenLayers.LonLat(-4.2, 54.6);
        var proj = new OpenLayers.Projection("EPSG:4326");
        point.transform(proj, map.getProjectionObject());
        map.setCenter(point, 5);

        //map.addControl(new OpenLayers.Control.PanZoomBar());

    }
</script>

</body>
</html>

Can anybody help me get rid of the + and – buttons?

Best Answer

A solution could be to initialize OL without controls.

var map = new OpenLayers.Map({
    controls: [],
    div: "map_canvas"
});

And now you can add your controls with

map.addControl(new OpenLayers.Control.PanZoomBar());

Or define controls on initialisation

var map = new OpenLayers.Map({
    controls: [new OpenLayers.Control.PanZoomBar()],
    div: "map_canvas"
});
Related Question