ユーザ用ツール

サイト用ツール


cms:google地図

**以前のリビジョンの文書です**

<html lang=“ja”

>

<

head> <meta charset=“UTF-8”

>

<

title>google mapのテスト</title> <script src=“http://maps.google.com/maps/api/js?sensor=true

></script>

<

/head> <!–body内の要素が読み込まれたら関数googleMapを読み込む–

>

<

body onload=“googleMap();”

>

<

!–次の記述の領域にMapを表示させる。表示領域のスタイルを定義しておく–

>

<

div id=“area-google-map” style=“width:100%;height:500px;”

></div>

<!–呼び出す関数–

>

<script> function googleMap() {var coordinate = new google.maps.LatLng(31.911686, 131.414043);

/座標の指定/

/マップの設定/ var mapOptions = { zoom: 18, /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');
          /*アイコンの表示設定*/
          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> </html>

cms/google地図.1483961323.txt · 最終更新: 2017/01/09 by N_Miya

ページ用ツール