1

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?

7

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"
});
  • Aha! I see what I was doing wrong now. I put controls[] into the gmap layer instead of the map initialization. Couldn't see the wood for the trees. Thank you so much! – ellcub Oct 29 '13 at 14:08
0

how about replacing:

<script src="http://openlayers.org/api/OpenLayers.js"></script>

by

<script src="http://dev.openlayers.org/releases/OpenLayers-2.11/OpenLayers.js"></script>

or adding some additional code:

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

take a look at this example:

http://dev.openlayers.org/releases/OpenLayers-2.12/examples/controls.html

  • Changing the script source did sort out the problem with the controls, but it also gave a popup box saying stuff like 'Map Data Map data ©2013 GeoBasis-DE/BKG (©2009), Google' on each zoom or pan. – ellcub Oct 29 '13 at 14:12
0

I have changed your code a bit to make it work. I hope it will help.

Here is modified 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(){

        map = new OpenLayers.Map('map_canvas', {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.Permalink(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ],
                    numZoomLevels: 12

                });

        // 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>
0

Just remove the default zoom with this:

map.removeControl(map.getControlsByClass('OpenLayers.Control.Zoom')[0]);

If you start with no controls then you'll lose the ability to move around the map by dragging the mouse pointer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.