ユーザ用ツール

サイト用ツール


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 myLatLng = {lat: 35.6494974, lng: 139.9135392};​ 
 +         
 +        var map = new google.maps.Map(document.getElementById('​map'​),​ { 
 +            zoom: 17, 
 +            center: myLatLng 
 +        });
  
-/​*マップの設定*/​ +        ​var marker ​= new google.maps.Marker({ 
-var mapOptions = { +            ​positionmyLatLng, 
-zoom: 18,  +            mapmap 
-/​*Map表示時の拡大倍率を調整。*/​ +        ​}); 
-center: coordinate,  +    
-/​*中心点をどこにするか。この場合は、目的地と同じ*/​ +    ​initMap();
-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" ​+
-                ] +
-              ​+
-            ];+
  
-            ​/*マップのデザインを適用させる記述*/​ +</script>
-            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地図.1483955317.txt · 最終更新: 2017/01/09 by N_Miya