CODEWITHSUNDEEP
google-maps
Anil.N
Anil.N

Reputation: 69

Change zoom in/zoom out image(+,-) or color in google map

I have a script of google map which is using by me,I want to change the zoom controller icon(+,-) or color.is there a any way to do this? 

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
    
    
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Upvotes: 0

Views: 4057

Answers (4)

Eric D&#39;Souza
Eric D&#39;Souza

Reputation: 690

Building on #92-92's answer. The .svg files have a transparent background, and are children of a div with class = 'gm-controls-active'. Google styles these inline; and so you need to use !important in your css to override.

.css to override

:root {
    --gm-button-background-color:white;
}
@media (prefers-color-scheme: dark) {
    :root {
        --gm-button-background-color:#2c4973;
    }
}

.gm-control-active {
    background-color:var(--gm-button-background-color) !important;
}

You don't need to get fancy with the prefers-color-scheme.

This solution is a bit of a hack as Google could change their class names at any point. Also unfortunately the .svg image files for the fullscreen button and the zoom buttons are different colors.

Upvotes: 0

92-92
92-92

Reputation: 21

Those + and - are SVG file. I was able to change position, opacity etc. by targeting img in the css.

My map div id is id="gmap". My css was targeting #gmap img {...}

Forcing a new img url might work as well.

Upvotes: 0

miguelcalderons
miguelcalderons

Reputation: 69

If you want both control button change the CustomZoomInControl function into this:

function CustomZoomInControl(controlDiv, map) {

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#000';
    controlUI.style.border = '2px solid #000';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '10px';
    controlUI.style.textAlign = 'center';
    controlUI.style.width = '40px';
    controlUI.style.height = '40px';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontSize = '24px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.style.color = '#fff';
    controlText.innerHTML = '+';
    controlUI.appendChild(controlText);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        map.setZoom(map.getZoom() + 1);
    });

    // Set CSS for the control border
    var controlUILeft = document.createElement('div');
    controlUILeft.style.backgroundColor = '#000';
    controlUILeft.style.border = '2px solid #000';
    controlUILeft.style.cursor = 'pointer';
    controlUILeft.style.marginBottom = '20px';
    controlUILeft.style.textAlign = 'center';
    controlUILeft.style.width = '40px';
    controlUILeft.style.height = '40px';
    controlDiv.appendChild(controlUILeft);

    // Set CSS for the control interior
    var controlTextLeft = document.createElement('div');
    controlTextLeft.style.fontSize = '24px';
    controlTextLeft.style.paddingLeft = '5px';
    controlTextLeft.style.paddingRight = '5px';
    controlTextLeft.style.color = '#fff';
    controlTextLeft.innerHTML = '-';
    controlUILeft.appendChild(controlTextLeft);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUILeft, 'click', function () {
        map.setZoom(map.getZoom() - 1);
    });

}

And same code to create the controls: 

var customZoomInControlDiv = document.createElement('div');
    var customZoomInControl = new CustomZoomInControl(customZoomInControlDiv, map);

    customZoomInControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(customZoomInControlDiv );

Upvotes: 0

Martin Schneider
Martin Schneider

Reputation: 15388

The style options of deafult zoom controls don't offer anything to change the color. But you can hide the default controls, add custom controls and give them the same functionality.

Here an example javascript code to add a custom zoom in button

function CustomZoomInControl(controlDiv, map) {

    // Set CSS for the control border
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#5ff';
    controlUI.style.border = '2px solid #5ff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '16px';
    controlText.style.fontWeight = 'bold';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = '+';
    controlUI.appendChild(controlText);

    // Setup the click event listeners
    google.maps.event.addDomListener(controlUI, 'click', function () {
        map.setZoom(map.getZoom() + 1);
    });

}

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        zoomControl: false,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    // Create the DIV to hold the control and
    // call the CustomZoomInControl() constructor passing
    // in this DIV.
    var customZoomInControlDiv = document.createElement('div');
    var customZoomInControl = new CustomZoomInControl(customZoomInControlDiv, map);

    customZoomInControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(customZoomInControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Related Questions