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 

                    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"),
), 5);

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

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

| improve this answer | |
  • I eventually found a google themed image set, So that sorted my problem out, Thanks for the direction though:) – Blake Loizides Feb 11 '12 at 13:00
  • nice, is it free to use? and is there any url to provide to the community? thanks – simo Feb 11 '12 at 16:32
  • I was reading this article on StackOverFlow and on this page there,s a link to a GitHub project.I downloaded it and found the image set, Not sure if you can use it or not but it,s a openlayers project. I had to dissect the elements of one panel of images. stackoverflow.com/questions/3286228/… – Blake Loizides Feb 12 '12 at 18:24
  • @simo - Can you post the images somewhere ? Couldn't find them in your link – Alophind Oct 12 '13 at 9:40
  • @Alophind : all images are listed here – simo Oct 12 '13 at 11:50

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.