Wie man den Stil mit Infofenster in Google Map ändern

Question

Ich muss den Stil mit Infofenster in Google Map ändern. Dies ist mein Code

jQuery(function($) { 
// Asynchronously Load the map API 
var script = document.createElement('script'); 
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCcgSw6pOY1_1t4LpPQK360V0reIfLDOi0&callback=initialize"; 
document.body.appendChild(script); 
}); 




function initialize() { 
var map; 
var bounds = new google.maps.LatLngBounds(); 
var mapOptions = { 
    maxZoom: 4, 
    minZoom: 2, 
    navigationControl: false, 
    scrollwheel: false, 
    mapTypeControl: false, 
    draggable: false, 
    mapTypeId: 'roadmap', 
    styles: [ 
     {elementType: 'geometry', stylers: [{color: '#F7F7F7'}]}, 
     {elementType: 'labels.text.stroke', stylers: [{color: '#F7F7F7'}]}, 
     {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
     { 
      featureType: 'administrative.locality', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d59563'}] 
     }, 
     { 
      featureType: 'poi', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d59563'}] 
     }, 
     { 
      featureType: 'poi.park', 
      elementType: 'geometry', 
      stylers: [{color: '#BCD9E1'}] 
     }, 
     { 
      featureType: 'poi.park', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#6b9a76'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'geometry', 
      stylers: [{color: '#38414e'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#212a37'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#9ca5b3'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'geometry', 
      stylers: [{color: '#b9b9b9'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#b9b9b9'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#f3d19c'}] 
     }, 
     { 
      featureType: 'transit', 
      elementType: 'geometry', 
      stylers: [{color: '#2f3948'}] 
     }, 
     { 
      featureType: 'transit.station', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d59563'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'geometry', 
      stylers: [{color: '#BCD9E1'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#515c6d'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'labels.text.stroke', 
      stylers: [{color: '#BCD9E1'}] 
     } 
     ] 



}; 

// Display a map on the page 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
map.setTilt(45); 





// Multiple Markers 
var markers = [ 
    ['Capital Tower, ADNEC Complex Abu Dhabi', 24.299174,54.697277], 
    ['Regional Office - Dubai - United Arab Emirates', 25.204849,55.270783], 
     ['FUJAIRAH ', 21.756779, 58.842773], 
    ['EGYPT', 28.822859, 26.674805], 
    ['lybia', 30.123591, 16.303711], 

]; 

// Info Window Content 
var infoWindowContent =[ 

    ['<div class="info_content">' + 
    '<h3>ABU DHABI HEADQUARTERS</h3>' + 
    '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +  '</div>'], 


    ['<div class="info_content">' + 
    '<h3>Palace of Westminster</h3>' + 
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
    '</div>'], 

    ['<div class="info_content">' + 
    '<h3>Palace of Westminster</h3>' + 
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
    '</div>'], 

    ['<div class="info_content">' + 
    '<h3>Palace of Westminster</h3>' + 
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
    '</div>'], 

    ['<div class="info_content">' + 
    '<h3>Palace of Westminster</h3>' + 
    '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
    '</div>'], 
]; 

// 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]); 
    var image = 'images/map-marker.png'; 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     icon: image, 
     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(2); 

    google.maps.event.removeListener(boundsListener); 
}); 

}

Wie kann ich die Hintergrundfarbe oder etwas mit CSS zu ändern, habe ich versucht, diese

.info_content{background-color: red} 

Aber das Ergebnis war wie dieses.

Ich muss die gesamte Fensterfarbe ändern. Jede Hilfe würde geschätzt werden

Answer 1

Sie sollten auf HTML in Ihrem Devtools suchen und Klasse des übergeordneten Elements suchen und danach fügen Sie einfach Stil, den Sie für diese Klasse in Ihrer style.css-Datei benötigen.