地図を画面いっぱいに表示する

Monaca

※地図を表示する方法に関しては、ここを参考にして下さい。

<完成イメージ>

<手順概要>
1. styleを設定する<手順詳細>
1-(1). html、bodyに対してスタイルを設定する

html, body{
    height:  100%;
    width:   100%;
    margin:  0;
    padding: 0;
}

1-(2). 地図を表示するdivに対してスタイルを設定する

#ymapDiv{
    height:  100%;
    width:   100%;  
}

【重要】div要素の高さは、親要素を基準とするので、html・bodyに対して、高さを設定しておく必要がある。


index.html 全体

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">

    <script src="plugins/plugin-loader.js"></script>
    <link rel="stylesheet" href="plugins/plugin-loader.css">
    
     <style>
        html, body{
            height:  100%;
            width:   100%;
            margin:  0;
            padding: 0;
        }
        
        #ymapDiv{
            height:  100%;
            width:   100%;  
        }     
    </style>

    <script type="text/javascript"
            charset="utf-8"
            src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID">
    </script>

    <script type="text/javascript">
        monaca.viewport({ width: 320 });
    
        function init(){
            var ymap = new Y.Map("ymapDiv");
            ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);                   
         }

    </script>
    
</head>

<body onload="init()">

    <div id="ymapDiv"></div>

</body>
</html>

お勧め書籍