Googleマップの衛星ビューの読み込み時に背景色が青色で表示されています

Question

Googleマップを実装し、デフォルトのビューをSatelliteとして実装しました。しかし、ページがロードされているときに地図を表示する前に背景が青く表示されています。マップビューのデフォルトを置くとうまく動作します。マップオプションでbackgroundColor: 'none'とチェックしました。しかし、それは動作しません。

私はのようなコードを使用しています

：誰かが私を助けることができる

map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(center_lat,center_long), 
     zoom: 18,   
     mapTypeControl: true, 
     mapTypeControlOptions: 
     { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID], 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
      position: google.maps.ControlPosition.TOP_RIGHT    
     },   
     mapTypeId: google.maps.MapTypeId.HYBRID, 
     navigationControl: true, 
     navigationControlOptions: 
     { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     backgroundColor: 'none' 
    }); 

？

Answer 1

私は場所の詳細を取得する前にマップ変数を定義しました。この問題の解決策を見つけました。場所の詳細を取得するためにurlを呼び出した後にマップ変数を定義します。例：

$.getJSON('googlescript.php', function(items) 
    { 
     var center_lat = '30.704649'; 
     var center_long = '76.717873'; 

     map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(center_lat,center_long), 
      zoom: 18,   
      mapTypeControl: true, 
      mapTypeControlOptions: 
      { 
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID], 
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       position: google.maps.ControlPosition.TOP_RIGHT    
      },   
      mapTypeId: google.maps.MapTypeId.HYBRID, 
      navigationControl: true, 
      navigationControlOptions: 
      { 
       style: google.maps.NavigationControlStyle.SMALL 
      }, 
      backgroundColor: 'gray' 
     }); 

     var routePoints = []; 
     for (var i = 0; i < items.length; i++) {      
      (function(item) {      
       addMarker(item.lat,item.long); 
      })(items[i]); 
      routePoints.push(new  google.maps.LatLng(items[i].lat,items[i].long)); 
      var route= new google.maps.Polyline({ 
         path: routePoints, 
         strokeColor: "#FF0000", 
         strokeOpacity: .9, 
         strokeWeight: 3, 
         geodesic: true, 
         icons: [{ 
          icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}, 
          offset: '0', 
          repeat: '100px' 
         } 
         ] 
      }); 
     map.setCenter(new google.maps.LatLng(center_lat,center_long)); 
     map.setZoom(18); 
     route.setMap(map); 
     map.setTilt(0);   
     } 

    }); 
    center = bounds.getCenter(); 
    map.fitBounds(bounds);