ユーザ用ツール

サイト用ツール


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>​
- <​script>​ +
-function googleMap() {var coordinate = new google.maps.LatLng(31.911686,​ 131.414043);​ +
-/​*座標の指定*/​+
  
-/​*マップの設定*/​ +    function initMap() { 
-var mapOptions ​= { +        var myLatLng ​= {lat35.6494974lng139.9135392}; 
-zoom18 +         
-/​*Map表示時の拡大倍率を調整。*/​ +        var map = new google.maps.Map(document.getElementById('​map'​),​ { 
-centercoordinate,  +            zoom17, 
-/​*中心点をどこにするか。この場合は、目的地と同じ*/​ +            ​centermyLatLng 
-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 marker ​= new google.maps.Marker(
-            ​var styleType ​= new google.maps.StyledMapType(styleOptions);​ +            position: myLatLng, 
-            map.mapTypes.set('​genius',​ styleType); +            map: map 
-            ​map.setMapTypeId('​genius'​);+        }); 
 +    } 
 +    initMap();
  
-            ​/*アイコンの表示設定*/​ +</script>
-            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地図.1483955210.txt · 最終更新: 2017/01/09 by N_Miya