How to hiding full control on Google Map

How to hiding full control on Google Map

One of my project, As per the requirement I have to hide all default controls of Google Map. So, I did a Google to find options of Google Map to hiding full control. After, Spending 20 minute on the Google Map document I find some JS options to hiding full control on Google Map.

After, Spending some time I found a good solution using CSS to remove full control.

Hiding full control on Google Map

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8,

        linksControl: false,
        panControl: false,
        addressControl: false,
        enableCloseButton: false,
        zoomControl: false,
        fullscreenControl: false,
        enableCloseButton: false

After, Applying these options still some controls are showing on the map like

Google Map hide all default control

However,  I would like to remove street view and map/satellite options form the Google Map. After that, I find one solution we can hide the map control using CSS. In other words, I just select the Map control using the Inspect tool of browser. For Instance, Find the control class using the Inspect tool.

After, Finding the class of the control that I want to Hide and write the CSS like.

Remove Google Map buttons using CSS

.gm-style > div:nth-child(10){

Now, You can check the control will hide. If not, Then check the proper class you select or not. In conclusion, You can easily hide the Map control using CSS and Inspect element tool.

If you face any issue after following the code please write the comment below. We are always ready for help.

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search Posts

Subscribe To Newsletter

Get Early Access To New Articles, Plugins, Discount Codes And Quickly Brief Updates about tips and tricks

Join 357 other subscribers

%d bloggers like this: