CODEWITHSUNDEEP
angulargoogle-maps
Dandy
Dandy

Reputation: 969

Angular Google Maps custom zoom icons

I am using AGM (Angular 6) and I can't figure out a way to change zoom in/out icons to custom ones. The AGM itself doesn't have such option, should it be done with pure JS? If so, how to do it best, as controls have no id or other kind of identification?

Upvotes: 0

Views: 1035

Answers (1)

markymark
markymark

Reputation: 145

Don't think about overriding google maps controls, think about creating your own and sticking them on the map in the positions mentioned here:

https://developers.google.com/maps/documentation/javascript/controls#CustomControls

Docs are pretty self explanatory. Got the example from there and modified the bottom so you get the idea 

      function CenterControl(controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#fff';
        controlUI.style.border = '2px solid #fff';
        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';
        controlUI.title = 'Click to recenter the map';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(25,25,25)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '16px';
        controlText.style.lineHeight = '38px';
        controlText.style.paddingLeft = '5px';
        controlText.style.paddingRight = '5px';
        controlText.innerHTML = 'Center Map';
        controlUI.appendChild(controlText);

        // Setup the click event listeners: simply set the map to Chicago.
        controlUI.addEventListener('click', function() {

          map.setZoom(map.getZoom() + 1 )
          //you would create another div for zoom -1 and call the function from there
          }
      }

Upvotes: 1

Related Questions