Google Maps は 2018年6月から Google Maps Platform と変更となりました。
Google Maps APIを3つに統合（Maps、Routes、Places）統合されます。
ただし、既存のコードを変更する必要はなく、そのままで動きます。
使用料に応じた料金体系に統一されるとのことです。
Google Maps Platform スタートページ
つまり、Google Cloud に加入しそのサービスの一部として Google Maps Platform を利用すつということとなります。 また、別の機会で Google Cloud の利用レポートいたします
ここでは、Geolocation を使い現在地を取得、取得した緯度経度から住所を取得する例を試してみました。
当然、実行する端末が位置情報を取得する機能がなければ位置は東京駅周辺を表示させます。
また、地図上をクリックするとクリックした地点にマーカーを表示し、そのマーカーをホーバーすると住所等を表示します。
Google Maps API
JavaScript ソースコード
|
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
function initMap() { 'use strict'; var xtarget = document.getElementById('xmap'); var geocoder = new google.maps.Geocoder(); var map; var tokyo = {lat: 35.681167, lng: 139.767052}; map = new google.maps.Map(xtarget, { center: tokyo, // zoom: 0 // zoom: 6 zoom: 15 }); geocoder.geocode({ location: tokyo }, function(results, status) { if (status !== 'OK') { alert('Failed: ' + status); return; } // results[0].formatted_address if (results[0]) { document.getElementById('address').innerHTML = results[0].formatted_address; } else { alert('場所が特定できません。'); return; } }); navigator.geolocation.getCurrentPosition(function(position) { map = new google.maps.Map(xtarget, { center: { lat: position.coords.latitude, lng: position.coords.longitude }, zoom: 15 }); geocoder.geocode({ location: { lat: position.coords.latitude, lng: position.coords.longitude } }, function(results, status) { if (status !== 'OK') { alert('Failed: ' + status); return; } // results[0].formatted_address if (results[0]) { document.getElementById('address').innerHTML = results[0].formatted_address + "<br>" + "緯度: " + position.coords.latitude + "<br>" + "経度: " + position.coords.longitude; } else { alert('場所が特定できません。'); return; } }); map.addListener('click', function(e) { geocoder.geocode({ location: e.latLng }, function(results, status) { if (status !== 'OK') { alert('Failed: ' + status); return; } // results[0].formatted_address if (results[0]) { // 地図上をクリックするとマーカーをドロップ var marker = new google.maps.Marker({ position: e.latLng, map: map, title: results[0].formatted_address, // マーカーをホーバーすると取得した住所を表示 animation: google.maps.Animation.DROP }); marker.addListener('click', function() { this.setMap(null); // マーカーをクリックした時に消す }); } else { alert('場所が特定できません。'); return; } }); }); }, function() { alert('Geolocation failed!'); return; }); //--------------------------------------------------- // 位置情報をサポートしていない端末で地図をクリックした時の処理 //--------------------------------------------------- map.addListener('click', function(e) { geocoder.geocode({ location: e.latLng }, function(results, status) { if (status !== 'OK') { alert('Failed: ' + status); return; } // results[0].formatted_address if (results[0]) { var marker = new google.maps.Marker({ position: e.latLng, map: map, title: results[0].formatted_address, // マーカーをホーバーすると取得した住所を表示 animation: google.maps.Animation.DROP }); marker.addListener('click', function() { this.setMap(null); // マーカーをクリックした時に消す }); } else { alert('No results found'); return; } }); }); } |
|
1 2 3 |
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIキーを入力]&callback=initMap"> </script> |
● Geocoding API を有効にします。
My Project > ダッシュボード > APIの概要に移動 > ライブラリ >
Maps JavaScriptAPI > 管理 > API > Geocoding API
My Project > ダッシュボード > APIの概要に移動 > ライブラリ >
Maps JavaScriptAPI > 管理 > API > Geocoding API
今回有効にしたサービスは以下の通りです。
JavaScriptAPIの管理ページで確認できます。
● 作成されたキーの公開のための設定を行います。
上記のGeocoding API > 認証情報タブ をクリックして移動
● キーを制限します。
該当する名称をクリック（最初は名前が設定されていなければ「APIキー」となっている。
キーの制限を設定します。 この場合 HTTPリファラーに設定して制限するサイトを 「https:/www.codingstock.jp/* 」を設定しました。
キーを制限にチェックを入れ保存をクリックして設定完了です。