Google Maps テンプレート（4）Polylines、OverviewMapControl

（4）Polylines、OverviewMapControl - Sample

Polylines（透過線）、OverviewMapControl（ナビゲートウィンドウ）を使用。地図タイプ選択ボタンはサテライト優先にしています。

・以下のテンプレート内の★印の箇所を好きなように書き換えてください。「名前を付けて保存」するときは、文字コードを「UTF-8」とすることを忘れずに。
緯度と経度はこちらで割り出してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<!-- 前の行の「xmlns:v="urn:schemas-microsoft-com:vml"」の記述がないと、Internet Explorer で Polyline が表示されない -->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API 2 テンプレート（Polyline描画、Overview表示）</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=KEY" type="text/javascript"></script>
<!-- 前の行の「kEY」はグーグルから取得した独自のものに変更する★ -->

<!-- javascriptはじまり -->
    <script type="text/javascript">
    //<[CDATA[

    function load() {
      if (GBrowserIsCompatible()) { 

    // ============基礎部分、setCenterで中心座標を指定==============
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(35.675,139.742746),13); //★ 中心位置とズームレベル
      map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 5))); //★ OverView の記述
    
    // ============Polyline 描画の設定、緯度（Lat）、経度（Lng）でいくつでも可能=========
      // ======線１========
      var polyline = new GPolyline([new GLatLng(35.680, 139.710), new GLatLng(35.680, 139.7427), new GLatLng(35.690, 139.774)],"#ff0000", 10, 0.2); // 赤の線、太さ最大（10）、2割の透過
      map.addOverlay(polyline);
      // ======線２========
      var polyline = new GPolyline([new GLatLng(35.675, 139.710), new GLatLng(35.675, 139.7427), new GLatLng(35.685, 139.774)],"#0000ff", 7, 0.6); // 青の線、太さ7、6割の透過
      map.addOverlay(polyline);
      // ======線３========
      var polyline = new GPolyline([new GLatLng(35.670, 139.710), new GLatLng(35.670, 139.7427), new GLatLng(35.680, 139.774)],"#008000", 4, 1.0); // 緑の線、太さ4、透過なし
      map.addOverlay(polyline);
    // ============Polyline 以上==================

      }
    }
    //]]>
    </script>
<!-- javascriptおわり -->

<!-- ここからスタイル、最初の v\:* の指示がないと、Internet Explorer で Polyline が表示されない -->
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	margin-top: 6px;
	margin-left: 6px;
}
div#map {
	border: 2px outset gray;
}
img {
	border: 0px;
}
</style>
<!-- スタイルおわり -->
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 480px"></div>
<br />
<a href="http://japonyol.net/editor/">Home</a>
</body>
</html>

・次は、（5） XML読み込みです。

Google Maps API サンプル一覧

Google Maps テンプレート（4）Polylines、OverviewMapControl

コメント(2)

Google Maps API

Category

Recent Posts