ユーザ用ツール

サイト用ツール


cms:google地図

差分

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

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

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