LogoMark.png

GoogleMapsAPI

JavaScript | Google Maps API



ここでは、HTML + CSS + JavaScriptによる
Google Map の活用サンプルを紹介します。

2016年6月22日より、GoogleマップのAPIの利用にはAPIキーの取得が必須になりました。またアクセス件数にも制限があります。以下のサイトからAPIキーを取得して、ソースに記載することが必要です(Googleアカウントが必要です)。
https://developers.google.com/maps/web/
キーはHTMLのソースコードから見えてしまいます。これを他に利用されないようにするためには、以下のGoogle API コンソールで、当該プロジェクトのキーの認証情報を確認し、このキーを使用できるウェブサイト、IP アドレス、またはアプリを指定して、キーを制限する必要があります。
https://console.developers.google.com/apis/

最近のブラウザでは、個人情報保護の観点から「http 接続では位置情報の取得を認めない」というかたちに仕様が変更されています。iMac OSX のSafariでは、システム環境設定で位置情報サービスをオンにする必要があるなど、動作確認には様々な条件をクリアする必要があります。

事例 地図上に現在位置を表示

GeolocationAPIを使って、現在位置を取得。GoogleMap上に表示します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
         <meta name="viewport" content="width=device-width">
         <meta charset="UTF-8">
         <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?key=[YOUR API KEY]"></script>
         <script type="text/javascript" src="sample.js"></script>
         <link rel="stylesheet" type="text/css"  href="style.css">
         <title>Sample Page</title>
    </head>
    <body>
         <div id="map_canvas"> </div>
         <div id="pos">lat, lng</div>
    </body>
</html>

style.css

#map_canvas {
    width: 480px;
    height: 640px;
}

ソース内のYOUR API KEYの部分に、あなたが取得したAPIキーを書く必要があります。https://developers.google.com/maps/web/

sample.js

var gmap,gmarker;

window.onload = function(){
    var defPos = new google.maps.LatLng(35, 135);
    gmap = new google.maps.Map(document.getElementById("map_canvas"), {
         zoom : 17,
         center : defPos,
         mapTypeId : google.maps.MapTypeId.ROADMAP
         });
    gmarker = new google.maps.Marker({
         positon : defPos,
         map: gmap,
         icon : "arrow.png"
   });

    navigator.geolocation.watchPosition(update);
}

function update(position){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var currentPos = new google.maps.LatLng(lat, lng);
    gmap.setCenter(currentPos);
    gmarker.setPosition(currentPos);
    document.getElementById("pos").innerHTML = lat+","+lng+"<br>"+(new Date());
}


GoogleMap 公式情報


PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 17:36:23