ユーザ用ツール

サイト用ツール


cms:google地図

差分

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

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

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