ユーザ用ツール

サイト用ツール


cms:google地図

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
cms:google地図 [2017/01/09 ]
N_Miya
cms:google地図 [2017/01/17 ] (現在)
N_Miya
ライン 1: ライン 1:
 <​html>​ <​html>​
 <​head>​ <​head>​
-<!--body内の要素が読み込まれたら関数googleMapを読み込む-->​ +    ​<meta name="viewport" ​content="​initial-scale=1.0"​
-<body onload="googleMap();​"+    <meta charset="utf-8"
-<​!--次の記述の領域にMapを表示させる。表示領域のスタイルを定義しておく--> +    <style
-<div id="area-google-map" style="​width:​100%;​height:​500px;​"></div+        html, body { 
- <!--呼び出す関数--+            height: 100%; 
- <script+            margin: 0; 
-function googleMap() {var coordinate ​new google.maps.LatLng(31.911686, 131.414043);​+            padding: 0; 
 +        } 
 +        #map { 
 +            ​height: 500px; 
 +            width: 100%; 
 +        } 
 +    </style> 
 +</head
 +<body
 +<div id="​map"></​div
 +Google地図を100%の幅で表示 
 +<script src="​https://​maps.googleapis.com/​maps/​api/​js"></​script>​ 
 +<​script>​
  
-/​*座標の指定*/​ +    function initMap() { 
-/​*マップの設定*/​ +        var myLatLng ​= {lat35.6494974lng139.9135392}; 
-var mapOptions ​= { +         
-zoom18 +        var map = new google.maps.Map(document.getElementById('​map'​),​ { 
-/​*Map表示時の拡大倍率を調整。*/​ +            ​zoom: 17, 
-centercoordinate,  +            ​center: myLatLng 
-/​*中心点をどこにするか。この場合は、目的地と同じ*/​ +        });
-mapTypeId: google.maps.MapTypeId.ROADMAP +
-/​*地図の表示タイプの指定。*/​ +
-}; +
-/​*マップをID area-google-mapに埋め込む記述*/​ +
-var map = new google.maps.Map(document.getElementById('​area-google-map'​), ​mapOptions);​ +
-/​*マップのデザインの指定*/​ +
-var styleOptions = [{"​stylers":​ [{ "​hue":​ "#​5F1863"​ }]}]; +
-/​*マップのデザインを適用させる記述*/​ +
-            ​var styleType = new google.maps.StyledMapType(styleOptions);​ +
-            ​map.mapTypes.set('​genius',​ styleType); +
-            ​map.setMapTypeId('​genius'​);+
  
-            /​*アイコンの表示設定*/​ +        ​var marker ​= new google.maps.Marker({ 
-            ​var icon = new google.maps.MarkerImage('​img/​icon.png',​ +            ​position: myLatLng
-            ​/​*アイコンのパス*/​ +            ​map: map 
-            new google.maps.Size(100,​100)+        }); 
-            ​/​*アイコンのサイズ*/​ +    } 
-            new google.maps.Point(0,​ 0+    ​initMap(); 
-            /​*座標からのアイコンの位置*/​ + 
-        ); +</script>
-        var markerOptions = { +
-          ​position:​ coordinate,​ +
-          ​/*表示場所と同じ位置に設置*/​ +
-          map: map, +
-          icon: icon, +
-      };+
  
-      /​*アイコンを表示させる記述*/​ 
-      var marker = new google.maps.Marker(markerOptions);​ 
-        } 
-    </​script>​ 
 </​body>​ </​body>​
 </​html>​ </​html>​
 +
 +表示できました。
cms/google地図.1483961712.txt · 最終更新: 2017/01/09 by N_Miya