2012-03-07 10 views
1

私は、例:exampleにある例を使用しようとしていますが、私はメインマップを表示できますが、小さなものはグレーです。 私のコードで何が問題になっていますか?グレー埋め込みグーグルマップ

@sectionスタイルシートはASPNET MVC 3からのものですが、重要ではありません.HTMLとして入力することもできます。

ありがとうございます。ギレルモ。

@section Stylesheets 
{ 
<style type="text/css"> 

#minimap { 
position: absolute; 
right: 0; 
bottom: 0; 
width: 160px; 
height:150px; 
z-index: 100; 
visibility:visible; 
border-top: 4px double #bbb; 
border-left: 4px double #bbb; 
} 


#closebutton { 
position: absolute; 
right: 0; 
bottom: 0; 
background: url('http://maps.gstatic.com/mapfiles/mapcontrols3d7.png') no-repeat; 
background-position: -40px -386px; 
width: 19px; 
height: 19px; 
z-index: 110; 
cursor: pointer; 
} 

#closebutton.closed { 
background-position: -40px -405px; 
} 

</style> 
} 
@section Scripts 
{ 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> 
    <!--For the tabs in the infoWindow--> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
} 
<script type="text/javascript"> 

    function init(sv_visible) { 
     var g = google.maps; 
     var map, pano, mini; 
     var mapDiv = document.getElementById('map_canvas'); 

     var center = new g.LatLng(37.422, -122.084); 

     var optionsMainMap = { 
      zoom: 13, 
      center: center, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
      }, 
      panControl: true, 
      scaleControl: true, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE 
      } 
     }; 

     map = new g.Map(mapDiv, optionsMainMap); 

     var optionsMiniMap = { 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.SATELLITE, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
      }, 
      panControl: true, 
      scaleControl: true, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.SMALL 
      } 
     }; 

     var miniMapDiv = document.createElement("div"); 
     miniMapDiv.id = "minimap"; 
     miniMapDiv.style.visibility = "visible"; 

     mini = new g.Map(miniMapDiv, optionsMiniMap); 
     mapDiv.appendChild(miniMapDiv); 
    } 

    window.onload = function() { init(true); }; 

</script> 
<div id="map_canvas" style="width: 1870px; height: 804px;"> 
</div> 
<div style="position: absolute; top: 10px; left: 680px; width: 210px"> 
</div> 
+0

この 'google.maps.event.trigger(mini、 'resize');' mapDiv.appendChild(miniMapDiv); '行の後に行を追加します。 – Engineer

+0

こんにちは、同じことが起こります。 – polonskyg

答えて

1

問題は、埋め込まれたマップは、私はそれを定義したときに、マップが現れ、中央部が定義されていなかったということでした。よろしくです。 よろしくお願いします。ギレルモ。