旋轉嵌入在HTML中的谷歌地圖

我打算做一個應用程序，它有一個特殊的部分來顯示嵌入式谷歌地圖。起初一切運作良好但是，當我旋轉回我的設備，地圖超出了定義的寬度，並失去了它的CSS類（它不能應用我使用的220px的寬度）。旋轉嵌入在HTML中的谷歌地圖

{//不管怎樣，我觸摸地圖將是確定，它關係到其寬度//} {//我使用Twitter的引導//}

，這是什麼大問題的解決方案我的？

我在等待你的回覆。

這是嵌入式谷歌地圖：

<article class="container"> 
    . 
    . 
    . 
    ...(some tags go here) 

      <section class="span12"> 
     <div class="map"> 
      <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed"> 
      </iframe> 
     </div> 
      </section> 

    </article>

這是我使用一個CSS類：

@media (max-width: 400px) { 
    .map {width: 220px;} 
    }

來源

2012-08-15 Arash

你必須做出一個事件處理程序旋轉你的設備，並調用地圖調整從谷歌地圖API – 2012-08-15 12:14:05

我對我的作品功能，220px寬度應用。嘗試調整窗口的大小。 http://jsfiddle.net/Qv86D/ – LeBen 2012-08-15 13:42:18

非常感謝你們兩位 – Arash 2012-08-17 17:13:16

嘿：-DI終於使我的方式來解決：

iframe HTML5標籤在這方面沒有用處，因爲它不支持設備方向。因此，它必須被移除，我用一個div id爲=「mapDiv」而不是：

 <body onLoad="initialize()"> <!-- Important --> 
     <article class="container"> 
     . 
     . 
     . 
     ...(some tags go here) 

      <section class="span12"> 
       <div id="mapDiv"> </div> <!-- Changed --> 
      </section> 

     </article> 
    </body>

，並根據什麼斯文Bieder評論我使用谷歌地圖API是這樣的：

/*Added javascript*/ 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

function initialize() { 
    var position = new google.maps.LatLng(38.89655520572012, -77.03372955322266); /*Here is the coordinates of the specific place we want to mark on map*/ 
    var myOptions = { 
    zoom: 15, 
    center: position, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 
    var map = new google.maps.Map(
    document.getElementById("mapDiv"), myOptions); 

    var marker = new google.maps.Marker({ 
    position: position, 
    map: map, 
    title:"We are here.", 
    }); 
    } 
</script>

嘛設備方向的問題已經解決了，現在:-)

和這裏是#mapDiv一些可選CSS：

#mapDiv { 
    width: 100%; 
    height: 300px; 
    margin: auto; 
    -moz-box-shadow: 1px 2px 12px #999999; 
    -webkit-box-shadow: 1px 2px 12px #999999; 
    border-radius: 8px; 
    }

來源

2012-08-19 13:32:27 Arash

-1

添加這種風格將旋轉格

div 
{ 
    transform:rotate(7deg); 
    -ms-transform:rotate(7deg); /* IE 9 */ 
    -moz-transform:rotate(7deg); /* Firefox */ 
    -webkit-transform:rotate(7deg); /* Safari and Chrome */ 
    -o-transform:rotate(7deg); /* Opera */ 
} 

<div style="transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */" class="map"> 
     <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed"> 
     </iframe> 
    </div>

來源

2012-08-19 13:39:55

漂亮的CSS，但你沒有明白這一點。我的意思是（移動）設備定位。順便問題解決了，非常感謝你 – Arash 2012-08-20 07:09:15

旋轉嵌入在HTML中的谷歌地圖

回答

相關問題