透明なbgを持つ地図を別の場所に配置する

道路やラベルの色に影響を与えずに1つの「衛星ビュー」マップを暗くするために、ある地図を別の地図に重ねることを検討しています。は、私はそれが次のようになりたい： http://pixfx.at/#Map 透明なbgを持つ地図を別の場所に配置する

だから私は自分のコードの一部を取り、それは次のようになり作られた：問題は、マップが表示されないということですが

<style type="text/css"> 
#map { 
height:543px !important; 
background-image:url(../images/background_gradient_transparent.png); 
background-repeat:repeat-x; 
border-top:1px solid #cccccc; 
border-bottom:1px solid #666666; 
margin:5px 0px 5px 0px; 
overflow:hidden !important; 
} 

#map_canvas { 
height:543px !important; 
background-color:transparent !important; 
overflow:hidden !important; 
} 

#map_canvas .terms-of-use-link { 
display:none; 
} 

</style> 




<script type="text/javascript"> 



    var map = new GMap2(document.getElementById("map_canvas")); 

    map.setCenter(new GLatLng(47.254072, 11.445657), 13); 

    map.setMapType(G_HYBRID_MAP); 
    /* 
    map.removeMapType(G_NORMAL_MAP); 
    map.removeMapType(G_HYBRID_MAP); 
    map.removeMapType(G_SATELLITE_MAP); 
    map.removeMapType(G_PHYSICAL_MAP); 
    */ 
    //map.getDragObject().setDraggableCursor("move"); 
    map.enableDoubleClickZoom(); 
    map.enableContinuousZoom(); 
    map.enableScrollWheelZoom(); 
    map.enableDragging(); 

    } 

    function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 




    jQuery('#map_canvas > div > div > div > div').each(function() { 

     if(jQuery(this).css('zIndex') == '0') 
     { 
      jQuery(this).find('img').each(function() { 
       jQuery(this).css({ opacity: '0.25' }); 
      }); 
     } 

    }); 

    jQuery('#map_canvas > .gmnoprint').css({ display: 'none' }); 


      } 

      window.onload = loadScript; 
      </script> 

      </head> 



      <body> 



      <div id="map"> 
      <div id="map_canvas" style="width:100%; height:100%;"></div> 
      </div>

。

出典

2011-07-12 pufAmuf

ご指定のコードは無効です。

map.enableDragging(); 

} //<-- this bracket is unmatched 

function loadScript() {

また、この行：var map = new GMap2(document.getElementById("map_canvas")); は不明な項目を使用します。間違ったAPIの使用/リンクがない

あなたのCSSについては、両方のキャンバスにカスタム画像を使用すると、#map_canvasが#mapを正しく超えていることがわかります。

あなたの問題はJavaScript内にあります.GoogleマップAPIを正しく使用していません。 GoogleマップのAPI v2はあなたはまた、あなたがSign up for a Google Maps API keyに必要なバージョン3.

に切り替える必要がありますを廃止予定ですので、私は...

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     var map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(new GLatLng(47.254072, 11.445657), 13); 
     map.setMapType(G_HYBRID_MAP); 
     map.enableDoubleClickZoom(); 
     map.enableContinuousZoom(); 
     map.enableScrollWheelZoom(); 
     map.enableDragging(); 

     jQuery('#map_canvas > div > div > div > div').each(function() { 
      if(jQuery(this).css('zIndex') == '0') 
      { 
       jQuery(this).find('img').each(function() { 
        jQuery(this).css({ opacity: '0.25' }); 
       }); 
      } 
     }); 
     jQuery('#map_canvas > .gmnoprint').css({ display: 'none' }); 
    }); 
      </script>

をややあなたのコードを変更したがGMap2のは、まだ定義されていません。そうしないとGoogleがあなたをブロックします。

go hereと指示に従ってください。 :)

出典

2011-07-12 13:57:44 Kraz

ああありがとう！私は間違いなくこれをv3に移植したいと思っています。私がv3でこれを行うと、どうやって他のものを置きますか？ 2つのマップ（var map1、map2）を作成する必要がありますか？ – pufAmuf

アイデアはありませんが、おそらく（そして上のものの不透明度を変更してください）、幸運です！ – Kraz

@pafAmuf次の行の 'map.setMapType（G_HYBRID_MAP）;で設定されたハイブリッドマップタイプはあなたのためのトリックを行います*（別のマップの上に1つのマップを置く）*。私はV3に似たものがあると思う。しかし、V2からGoogleマップのHTMLレイアウトが変更された場合、JQueryコードを調整する必要があることを意味する可能性があります。 –

透明なbgを持つ地図を別の場所に配置する

答えて

関連する問題