金子邦彦研究室 ▶ プログラミング ▶ JavaScript による Web プログラミング ▶ Google Maps API を使ってみる

サイトマップ サイト内検索 まとめ

サイトの全体構成

Google Maps API を使ってみる

全体構成 人工知能 データベース ３次元，地図 プログラミング 情報工学全般 インストール 支援 連絡先，業績

この Web ページで行うこと．

準備

◆ JavaScript に関する Web ブラウザの設定

Google Maps API を使って地図を表示してみる

【関連する外部ページ】 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>Google Maps API sample</title>

        <script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        <!--
            google.maps.event.addDomListener(window, 'load', function() {
            var latlng = new google.maps.LatLng(33.104053, 131.78092); 
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
            };
            var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
        });
        // -->
        </script>
    </head>

    <body style="width : 500px; height : 400px;">
        <div id="googlemap" style="width : 400px; height : 300px;"></div> 
    </body>
</html>

ストリートビューの表示例 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>Google Maps API sample</title>

        <script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        <!--
            google.maps.event.addDomListener(window, 'load', function() {
            var latlng = new google.maps.LatLng(33.59656025053064, 130.21688103675842); 
            var myOptions = {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
            };
            var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
            var panoOptions = {
                    position: latlng, 
                pov: { 
                heading: 135, 
                pitch: 6
                                }
            };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoOptions);
                        map.setSteetView(panorama)
        });
        // -->
        </script>
    </head>

    <body style="width : 640px; height : 960px;">
        <div id="googlemap" style="width : 640px; height :480px;"></div> 
        <div id="pano" style="width : 640px; height : 480px;"></div> 
    </body>
</html>

[image] from the Google Map website

Google Maps API を使って地図上の緯度，経度を得る 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>Google Maps API sample</title>

        <script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        <!--
        google.maps.event.addDomListener(window, 'load', function() {
        var latlng = new google.maps.LatLng(33.104053, 131.78092); 
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
        };
        var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

          google.maps.event.addListener(
            map, 'click', 
            function(e) {
                document.getElementById("latlng_disp").innerHTML = "（緯度, 経度）＝（" + e.latLng.lat() + ", " + e.latLng.lng() + "）";
            });
        });

        // -->
        </script>
    </head>

<body style="width : 500px; height : 400px;">
    <div id="googlemap" style="width : 400px; height : 300px;"></div> 

    <p>地図上をクリックすると、緯度・経度が地図の下に表示される．</p>
    <div id="latlng_disp"></div>
</body>
</html>

◆ Web ブラウザでの表示例

[image] from the Google Map website

プログラムの例 

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Windows-31J" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>Google Maps API sample</title>

        <script type="text/javascript" src=//"maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        <!--
        
        var marker_list=[];
        
        google.maps.event.addDomListener(window, 'load', function() {
        var latlng = new google.maps.LatLng(33.104053, 131.78092); 
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
        };
        var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
          google.maps.event.addListener(
            map, 'click', 
            function(e) {
                document.getElementById("latlng_disp").innerHTML = "（緯度, 経度）＝（" + e.latLng.lat() + ", " + e.latLng.lng() + "）";
            });
        for (var i = 0; i < locations.length; i++) {
                var lpoint = locations[i];
                setMarkers(map, lpoint);
          marker_list[lpoint[0]]=setMarkers(map, lpoint);
          }
          
        });
        
        var txt01="<CENTER><IMG hspace=5 src='土づくりセンター.png' vspace=5 width=250 height=170><BR>土づくりセンター</CENTER>";
        var txt02="<CENTER><IMG hspace=5 src='野津町コープ.png' vspace=5 width=250 height=170><BR>野津町コープ</CENTER>";
        var locations = [
        ['土づくりセンター', 33.060184, 131.738541, txt01, 1],
        ['野津町コープ', 33.038123993773865, 131.6888639330864, txt02, 2]
        ];

        function setMarkers(map, lpoint) {
        var latlng = new google.maps.LatLng(lpoint[1], lpoint[2]);
        var marker1 = new google.maps.Marker({
            position: latlng,
            map: map,
            title: lpoint[0],
            zIndex: lpoint[4]
        });
        var infowindow = new google.maps.InfoWindow({
            content: lpoint[3]
        });
        google.maps.event.addListener(marker1, 'click', function(){
             infowindow.open(map,marker1);
        });
           return marker1;
        };

        function clickMarker(index){
        google.maps.event.trigger(marker_list[index], "click"); //click時に吹き出しを表示する
        }
        
        // -->
        </script>
    </head>

<body style="width : 1024px; height : 400px; bgcolor="#edf3ff">
  <table>
        <tbody>
        <tr>
            <td>
                <h1>臼杵市マップ</h1>
                <div id="googlemap" style="width: 800px; height: 600px;"></div>
                <br>
            </td>
            <td align="center">
                <a onclick="clickMarker('土づくりセンター');" href="javascript:void(0);">
                <img src="土づくりセンター.png" width="160" height="77">
                <br>
                土づくりセンター
                </a><br>
                <a onclick="clickMarker('野津町コープ');" href="javascript:void(0);">
                <img src="野津町コープ.png" width="160" height="120">
                <br>
                野津町コープ
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <p>地図上をクリックすると、緯度・経度が地図の下に表示される．</p>
    <div id="latlng_disp"></div>
  </body>
</html>

◆ Web ブラウザでの表示例

[image] from the Google Map website

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先： 金子邦彦（かねこ くにひこ） [image]