Google Map API を使って始点終点の経路情報と地図画像を得る

概要

ソース

gmap.html

  • filegmap.html
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Google Map API</title>
    <link rel="stylesheet" type="text/css" href="http://www.takeash.net/take.css">
    <style TYPE="text/css">
    <!--
    .debug {
    	display: none;
    }
    -->
    </style>
    </head>
    <body onload="init()">
    <h1>Google Map API</h1>
    <ul>
    <li><p><a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html">Google Maps JavaScript API</a> - <a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#DirectionsService">DirectionsService</a>を使って経路検索を行ないます。</p></li>
    <li><p><a href="http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/">Static Maps API</a>を使って地図画像を得ます。</p></li>
    </ul>
    <form id="FORMGMAP" action="#">
    <table summary="Map Options" border="1">
    <tr><th>出発地</th><td><input id="START" type="text" value="東京駅"></td></tr>
    <tr><th>目的地</th><td><input id="GOAL" type="text" value="東京ビックサイト"></td></tr>
    <tr><th>手段</th><td>
    <select id="TRAVELMODE">
    <option value="W" selected>徒歩</option>
    <option value="D">自動車</option>
    <option value="B">自転車</option>
    </select>
    </td></tr>
    <tr><th>マップタイプ</th><td>
    <select id="MAPTYPE">
    <option value="R" selected>道路地図</option>
    <option value="S">航空写真</option>
    <option value="T">地形図</option>
    <option value="H">組み合わせ</option>
    </select>
    </td></tr>
    <tr><th>大きさ</th><td>
    <select id="MAPSIZE">
    <option value="200x200">200x200</option>
    <option value="300x300" selected>300x300</option>
    <option value="400x400">400x400</option>
    <option value="400x640">400x640</option>
    <option value="500x500">500x500</option>
    <option value="640x400">640x400</option>
    <option value="640x640">640x640</option>
    </select>
    </td></tr>
    <tr class="debug"><th>モバイル</th><td><input id="MOBILE" name="MOBILE" type="checkbox" value="on"> <label for="mobile">モバイルモード</label></td></tr>
    <tr><td colspan="2" align="center"><input type="button" value=" 表示 " onclick="getMap()"></td></tr>
    </table>
    </form>
     
    <h2 id="TITLE">出発地 - 目的地</h2>
    <p><img id="GMAP" alt="gmap" src="http://code.google.com/images/code_logo.png"></p>
    <div class="debug"><textarea id="DEBUG" rows="30" cols="100">debug</textarea></div>
     
    <!-- http://www.openspc2.org/reibun/Google/Maps/API/ver3/ -->
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <!-- http://blog.livedoor.jp/dankogai/archives/50958256.html -->
    <!-- <script type="text/javascript" src="http://coderepos.org/share/browser/lang/javascript/clone/trunk/uneval.js?format=txt"></script> -->
    <script type="text/javascript" src="http://www.takeash.net/Etc/gmap.js"></script>
    </body>
    </html>

gmap.js

  • filegmap.js
    すべてを展開すべてを収束
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
    
     
     
     
     
     
     
     
     
     
     
     
    -
    |
    |
    |
    |
    |
    |
    |
    |
    |
    -
    |
    !
    |
    |
    |
    |
    |
    |
    |
    -
    |
    |
    |
    !
    -
    -
    |
    |
    -
    |
    -
    |
    !
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    |
    -
    |
    -
    |
    -
    |
    !
    |
    !
    !
    |
    !
     
     
     
    -
    |
    !
     
     
     
    -
    |
    -
    |
    !
    !
     
     
    
    /*
    	Google Map 表示(経路付き)
    	gmap.js
    	2010.11.07	初版。
    	2010.11.08	LatLng のアクセス方法変更。地図の中心を求めるのに LatLngBounds を使うようにした。タイトルを検索結果で置き換えるようにした。
    */
     
    var GoogleMapStaticAPI = "http://maps.google.com/maps/api/staticmap?sensor=false";
    var TravelMode = { 'W':'WALKING', 'D':'DRIVING', 'B':'BICYCLING' };
    var MapType = { 'R':'roadmap', 'S':'satellite', 'T':'terrain', 'H':'hybrid' };
     
    function getMap(){
        var directionsService = new google.maps.DirectionsService();
        var elmStart = document.getElementById( "START" );
        var elmGoal = document.getElementById( "GOAL" );
        var elmTravelMode = document.getElementById( "TRAVELMODE" );
        var travelmode = TravelMode[ elmTravelMode.options[ elmTravelMode.selectedIndex ].value ] || TravelMode[ 'W' ];
        var elmMapType = document.getElementById( "MAPTYPE" );
        var maptype = MapType[ elmMapType.options[ elmMapType.selectedIndex ].value ] || MapType[ 'R' ];
        var elmMapSize = document.getElementById( "MAPSIZE" );
        var mapsize = elmMapSize.options[ elmMapSize.selectedIndex ].value;
        if ( !mapsize.match( /\d+x\d+/ ) ){
            mapsize = "300x300";
        }
        var elmMobile = document.getElementById( "MOBILE" );
     
        var elmTitle = document.getElementById( "TITLE" );
        var elmGMap = document.getElementById( "GMAP" );
        var elmDebug = document.getElementById( "DEBUG" );
     
        directionsService.route(
            {
                origin :        elmStart.value,
                destination:    elmGoal.value,
                travelMode:        google.maps.DirectionsTravelMode[ travelmode ]
            },
            function( response, status ){
                if ( status == google.maps.DirectionsStatus.OK ) {
                    var legs = response['routes'][0]['legs'][0];
                    //elmDebug.value = uneval( legs );
                    if ( elmTitle.textContent ){
                        elmTitle.textContent = legs['start_address'] + ' - ' + legs['end_address'];
                    } else {
                        elmTitle.innerText = legs['start_address'] + ' - ' + legs['end_address'];
                    }
     
                    var start_loc  = legs['start_location'];
                    var end_loc    = legs['end_location'];
                    // var center_loc = new LatLngBounds(start_loc,end_loc).getCenter() だと
                    // スタートとエンドを入れ替えたときに変な値を返すことがある
                    var bounds = new google.maps.LatLngBounds();
                    bounds.extend( start_loc );
                    bounds.extend( end_loc );
                    var center_loc = bounds.getCenter();
                    elmGMap.src = GoogleMapStaticAPI
                        + '&maptype=' + maptype
                        + '&size=' + mapsize
                        + '&mobile=' + elmMobile.checked
                        + '&center=' + center_loc.toUrlValue()
                        + '&markers=label:S|' + start_loc.toUrlValue()
                        + '&markers=label:G|' + end_loc.toUrlValue()
                        + '&path=enc:' + response['routes'][0]['overview_polyline']['points'];
                }else{
                    //elmDebug.value = uneval( response );
                    if ( elmTitle.textContent ){
                        elmTitle.textContent = "Error: " + response.status;
                    } else {
                        elmTitle.innerText = "Error: " + response.status;
                    }
                    elmGMap.src = "http://code.google.com/images/code_logo.png";
                }
            }
        );
    }
     
    // JavaScriptの動かないコード (中級編) onKeydownイベントが認識されない
    // http://d.hatena.ne.jp/language_and_engineering/20081112/1226507019
    function init(){
        document.onkeyup = myExec;
    }
     
    // <input type="text">でEnterを押してもsubmitさせない方法【HTML, JavaScript】
    // http://www.programming-magic.com/20080119212425/
    function myExec(e){
        if (!e) var e = window.event;
        if( e.keyCode == 13 ){
            getMap();
        }
    }
     
    // EOF
    

添付ファイル: filegmap.zip 207件 [詳細]

リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Tue, 13 Dec 2016 14:55:09 JST (583d)