線の色、太さ、透明度を指定する

はじめに

 Google Maps(Google Local)のAPIを利用する方法を簡単に紹介しています。今回 は「描く線の色などを自由に設定する方法について」です。


スクリプトの変更

 前回に作成したコードを変更します。
<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    v\:*
    {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <table><tr><td>
    <br><br><div id="label_test" style="width: 400px; height: 200px; overflow: scroll; padding: 3px; background-color: white; border: 1px solid black;"></div>
    </td><td>
    <input type=button value='戻る' id=button_back onclick="LineBack()">
    <br><form name=line_param>
    色<input type=text value='#FF0000' name=text_color><br>
    太さ<input type=text value='5' name=text_weight><br>
    透明度<input type=text value='0.4' name=text_opacity><br>
    <input type=button value='再描画' id=button_refresh onclick="LineRefresh()">
    </form>
    </td></tr>
    </table>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 4);
    
    function AddGMarker(objMap,nLatitude,nLongitude,strHtml)
    {
       var objPoint = new GPoint(nLatitude,nLongitude);
       var objMarker = new GMarker(objPoint);

       GEvent.addListener(objMarker,"click",function(){ objMarker.openInfoWindowHtml(strHtml); });
       objMap.addOverlay(objMarker);
    }

    AddGMarker(map,135.3659722,34.72072222,"<img src=http://www.dinop.com/google/map/use_html_comment_test.gif align=left>甲子園駅<br><br><a href=http://www.hanshintigers.jp/ target=_blank>阪神タイガース</a>の本拠地としても知<br>られる甲子園球場の目の前にあり<br>ます。<br clear=left>");
    AddGMarker(map,135.3585277,34.70730555,"甲子園浜");
    
    aobjPoints =
       [
          new GPoint(135.3659722,34.72072222),
          new GPoint(135.3585277,34.70730555)
       ];
    objLine = new GPolyline(aobjPoints,document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
    map.addOverlay(objLine);
    GEvent.addListener(map, 'click', function(objOverlay, objPoint)
       {
          if(objPoint)
          {
             map.removeOverlay(objLine);
             aobjPoints.length++;
             aobjPoints[aobjPoints.length - 1] = new GPoint(objPoint.x,objPoint.y);
             objLine = new GPolyline(aobjPoints,document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
             map.addOverlay(objLine);
             
             document.getElementById("label_test").innerHTML += objPoint.x + ',' + objPoint.y + "<br>";
           }
        });
    _map = map;
    
    function LineBack()
    {
        var map = _map;
        map.removeOverlay(objLine);
        if(aobjPoints.length > 0)
           aobjPoints.length--;
        objLine = new GPolyline(aobjPoints,document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
        map.addOverlay(objLine);
        
        var strData = "";
        for(i = 0; i < aobjPoints.length; i++)
           strData += aobjPoints[i].x + ',' + aobjPoints[i].y + "<br>";
        document.getElementById("label_test").innerHTML = strData;
    }
    
    function LineRefresh()
    {
        var map = _map;
        map.removeOverlay(objLine);
        objLine = new GPolyline(aobjPoints,document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
        map.addOverlay(objLine);
    }
    
    //]]>
    </script>
  </body>
</html>
 赤字が変更や追加した部分です。
 太字の部分はAPI Keyです(人それぞれ異なる値です)。

 実際に動かして地図の中をクリックすると線を描くことができ、線の色を変更して「再描画」ボタンを 押すと色が変わります。同じように太さや透明度も自由に設定できます。入力された値のチェックはして いません。そのため不正な値は入力しないようにしてください。


カテゴリー「GoogleマップAPI」 のエントリー