0

マップは正常に読み込まれますが、高さと幅の % を設定しようとすると表示されません。これを修正するにはどうすればよいですか? マップが表示される唯一の方法は、px で設定した場合ですが、モバイル版のマップはすべて不安定で、画面の端にずれています。ありがとう。

<?php
    /* Include header and config and set variable*/
    require_once('config.inc.php');
    require_once($rootdir . $dirsubfolder . 'navbar.php');
    $route = $_GET['route'];
?>

<?php
/* User wants to retrieve their route */
if (isset($route)) {
?>


<?php
/* User wants Route 1 */
if (strcmp($route, "sunroute1") == 0) {
?>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

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

    window.onload = loadScript;
</script>
<?php
printf('worked');
} else { printf('failed'); }
?>


    <div class="container hero-unit">
        <div id="map_canvas" style="width: 50%; height: 50%;"></div>
    </div>









<?php
    /* End isset(route) */
    }
    /* Include footer */
    require_once($rootdir . $dirsubfolder . 'footer.php');
?>
4

1 に答える 1

0

Bootstrapのレスポンシブフォームを使用していると思います...

html、bodyおよび .hero-unit要素の高さと幅を 100% に設定する必要があります。

ここにjsFiddleがあります。

于 2013-03-03T07:04:47.343 に答える