[GIS] How to use Google Default Pan/Zoom controls in openlayers

google mapsjavascriptopenlayers-2

I am using Google maps version 3 with Openlayers,My question is how do you use the default google control for Panning and Zooming and not the default controls Openlayers panning and zooming(The dark blue controls)

I know that it is controlled by the CSS for Openlayers, But what is the default CSS for the Google Pan/Zoom Controls / Where do I find this CSS for the Google controls in the image below.

Google Default Controls Openlayers Pan/Zoom Control

 var map, layer;

        function init(){

        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );

  // Add Styles
  var myStyles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                fillColor: "#000",
                fillOpacity: 0.3,
                strokeColor: "#000",
                strokeOpacity: 0.3,
                strokeWidth: 1,
                graphicZIndex: 1
            }),
            "select": new OpenLayers.Style({
                fillColor: "#ccc",
                fillOpacity: 0.6,
                strokeColor: "#ccc",
                strokeWidth: 1,
                label: "Label for Mouseover",
                labelAlign: "cc",
                fontColor: "#333333",
                fontOpacity: 0.9,
                fontFamily: "Arial",
                fontSize: 14,
                graphicZIndex: 2
            })
        });

        vlayer = new OpenLayers.Layer.Vector( "Editable",{
            styleMap: myStyles,
            rendererOptions: {zIndexing: true}
        });

        map = new OpenLayers.Map( 'map', {

        // Add Openlayers Map Controls 
        controls: 

                 [
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.PanZoom(),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.ScaleLine(),
                    new OpenLayers.Control.OverviewMap(),
                    new OpenLayers.Control.EditingToolbar(vlayer) 

                 ]   
         });

// Make Variables for Google Version 3 
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);

    // Add layers to map
    map.addLayers([gphy, gmap, ghyb, gsat]);

    map.addLayers([layer, vlayer]);

    // Google.v3 uses EPSG:900913 as projection, so we have to transform our coordinates
    map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
), 5);

   var panel = new OpenLayers.Control.Panel();
    panel.addControls([
        new OpenLayers.Control.Button({
            displayClass: "helpButton", trigger: function() {alert('help')}, title: 'Help'
        })
    ]);
     map.addControl(panel);

Best Answer

You can apply a new theme for controls simply by giving it the right url, like so :

OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

From what I know, the GoogleMap style like doesn't exist yet so you will have to design it.

Here is the source for the theme given above: https://github.com/developmentseed/openlayers_themes

Related Question