Search code examples
javascriptreactjsgoogle-mapsgoogle-maps-api-3

Google react maps - how to change control color?

I use google-react-maps with zoomControl and mapTypeControl:

enter image description here

  <Map onMount={(map, maps) => {}} {...mapProps} style={{
      height: '100%'
    }} api-key={key} optionsConstructor={(maps) => {
      return {
        disableDefaultUI: true,
        keyboardShortcuts: true,
        mapTypeId: maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {
          style: maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: true,
        rotateControl: true,
        rotateControlOptions: {
          position: maps.ControlPosition.RIGHT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
          position: maps.ControlPosition.RIGHT_TOP             
        }
      }
    }}>

How to change zoom and map type controls background color?

Solution

  • Just target the element then add a CSS background color (div > div > div > button). You can be more specific by using classes in css instead of the element. Here's what I did (check the CSS codes): 

    function initMap(){
  var radius = 10000;
  var latlng = {lat:47.423201, lng:-120.311193};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    streetViewControl:  false,
    zoom: 8
  });
}
    #map{
   height:50%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div > div > div > button { /* this is what I did */
  background-color: red !important
}
    <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap" async defer></script>   
   </head>
   <body>
      <div id="map"></div>
   </body>
</html>

    Here's a working sample: http://jsbin.com/cosezum/edit?html,css,js,output

    Hope this helped!