Custom grey colored Google Map

google-map-custom.js

function initialize() {
    var map, map2;
    var styleArray = [
        {
          featureType: "all",
          stylers: [
           { saturation: -80 }
          ]
        },{
          featureType: "road.arterial",
          elementType: "geometry",
          stylers: [
            { hue: "#00ffee" },
            { saturation: 40 }
          ]
        },{
          featureType: "poi.business",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        }
      ];
    var mapOptions = {
        styles: styleArray,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };
                    
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map2 = new google.maps.Map(document.getElementById("map-world"), mapOptions);
        
    // Multiple Markers
    var markers = [
        ['Gulshan Avenue, Dhaka', 23.788001, 90.417095],
        ['Gulshan 1, Dhaka', 23.776634, 90.413951]
    ];
                        
    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>HEADQUARTERS</h3>' +
        '<p>Hosna Center (5th floor), 106, Gulshan Avenue, Dhaka.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Satellite Office</h3>' +
        '<p>House: 10A, Road: 4, Gulshan: 1, Dhaka.</p>' +
        '</div>'],
    ];
    
    // Multiple Markers
    var markers2 = [
        ['Gulshan Avenue, Dhaka', 23.788001, 90.417095],
        ['Gulshan 1, Dhaka', 23.776634, 90.413951]
    ];
                        
    // Info Window Content
    var infoWindowContent2 = [
        ['<div class="info_content">' +
        '<h3>HEADQUARTERS</h3>' +
        '<p>Hosna Center (5th floor), 106, Gulshan Avenue, Dhaka.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Satellite Office</h3>' +
        '<p>House: 10A, Road: 4, Gulshan: 1, Dhaka.</p>' +
        '</div>'],
    ];
    
    
    //runMap(map, markers, infoWindowContent, 3);
    runMap(map2, markers2, infoWindowContent2, 14);
}

function runMap(map, markers, infoWindowContent, zoom) {
    map.setTilt(45);
    var bounds = new google.maps.LatLngBounds();
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(zoom);
        google.maps.event.removeListener(boundsListener);
    });
}

google-map-init.js

$(document).ready(function(){
    /*$(document).on('click','.contact-us-nav li,.contact-us-nav li a',function(){
        initialize();
    });*/
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      //e.target
        initialize();
    });
});