第1回「Google map API」google mapを表示 PHP HTML5 css3 javascript API
こんにちは。今回は「Google map」を自分のファイルに表示する方法に触れていきます。
※2017年までは誰でも簡単に表示できましたが、現在はAPIキーを取得していないと表示できません。
その為、今回、APIキーの取得方法を含め、表示方法をまとめることにしました。
 |
移動したら、サイトの位置情報設定を「許可」にすると、現在地のGoogle mapが表示されます
※動作確認が終わったら、位置情報設定を「ブロック」にしてください。
目次・「Google map」のAPIキーを取得 ・「Google map」のオープンソース ・具体的なソースの説明 ・オプション ・まとめ ・今回の記事を書くにあたって参考にしたサイト |
・「Google map」のAPIキーを取得
まずはAPIの取得からここからは、早速Google Maps APIの使い方を見ていきます。 初めて使う場合は、まずAPIキー（認証情報）の取得をします。 ※ 2016年6月のアップデート以降、新規利用時にはAPIキーの取得が必須となりました。 APIキーの新規取得今回は利用したいAPIの種類が決まっているので、「Google Maps JavaScript API」ページへアクセスして右上の「キーの取得」ボタンを押します。
ポップアップ上で好きな「プロジェクト名」を入力し、利用規約に同意後「CREATE AND ENABLE API」をクリック。
すると、準備完了のメッセージとともにYOUR API KEYの部分に取得したAPIキーが表示されました！
ここで見逃してはいけないのが下記の一文。「セキュリティ向上のため、キーの使用を制限してください」といった内容が書かれています。
API Consoleのリンクから、「Google API Console」の画面に移動しましょう。 キーの制限が必要な理由初期状態では、APIキーさえ知っていれば知らない人が他のサイトで勝手に使うこともできてしまう状態です。キーの制限設定で利用範囲を制約することで、これを防ぐことができます。 制限設定がされていない場合「Google API Console」の画面上でも警告マークが表示されます。
キーの制限方法にはいくつか選択肢がありますが、一番わかりやすい方法はHTTPリファラー（ウェブサイト）です。
例えば入力欄に |
参考URL：https://www.granfairs.com/blog/staff/google-maps-api-01
・「Google map」のオープンソース
APIキーを取得しましたら、Google mapをブラウザで表示してみましょう。
下記を「index.html」と名前を付けて保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>位置情報の取得</title>
<!-- Google mapのCSS -->
<style>
#maps{
height:300px;
width:500px
}
</style>
<!-- google mapを表示する為に必要なjabascript keyにはAPIキーを書き換えてjsファイルを読み込みます。 -->
<script src="//maps.googleapis.com/maps/api/js?key=「ここにAPIキーを書いてください」&callback=initMap" async></script>
</head>
<body>
<h2>現在の位置情報</h2>
<!-- google mapを表示するdiv -->
<div id="maps"></div>
<script>
</script>
<!-- Google Map を表示するjavascript -->
<script>
function initMap() {
//現在位置を許可させ、位置を取得する javascript 参考URL：http://taitan916.info/blog/?p=2280
var ret = new Array();
if( navigator.geolocation ){
navigator.geolocation.getCurrentPosition(
function( pos ){ //位置取得成功
ret['long'] = pos.coords.longitude; //経度
ret['lat'] = pos.coords.latitude; //緯度
//位置を指定して、Google mapに表示する javascript 参考URL：https://www.granfairs.com/blog/staff/google-maps-api-01
var mapPosition = {}
mapPosition["lat"] = ret['lat'];
mapPosition["lng"] = ret['long'];
var mapArea = document.getElementById('maps');
var mapOptions = {
center: mapPosition,
zoom: 16,
};
var map = new google.maps.Map(mapArea, mapOptions);
//現在地にマーカーを付けます。参考URL：https://developers.google.com/maps/documentation/javascript/markers?hl=ja
var marker = new google.maps.Marker({
position: mapPosition,
title:"Your location"
});
marker.setMap(map);
result( ret );
},
function( error ){ //失敗
switch( error.code ){
case 1: ret['msg'] = "位置情報の利用が許可されていません"; break;
case 2: ret['msg'] = "デバイスの位置が判定できません"; break;
case 3: ret['msg'] = "タイムアウトしました"; break;
}
result( ret );
}
);
} else { //使用不可のブラウザ
ret['msg'] = 'このブラウザでは位置取得が出来ません。';
result( ret );
}
//コンソールにログを出力 ※本番環境ではログを出さないので、消しましょう。
function result( ret ){
console.log( ret );
}
}
</script>
</body>
</html>
18行目の「ここにAPIキーを書いてください」の部分は、先ほど取得したAPIキーを書き換えてください。
ブラウザで確認すると、位置情報を求められるので、今回のみ「許可」すると、現在地の地図が表示されます。
最初にも書きましたが、通常は「ブラウザの位置情報」を「ブロック」にしてください。
悪意のあるサイトもありますので、信頼できるサイトのみ「許可」しましょう。
参考URL：http://taitan916.info/blog/?p=2280
・具体的なソースの説明
<!-- Google mapのCSS -->
<style>
#maps{
height:300px;
width:500px
}
</style>
9行目～15行目
ここではgoogle mapを表示する、divタグの高さと幅を設定しています。
<!-- google mapを表示する為に必要なjabascript keyにはAPIキーを書き換えてjsファイルを読み込みます。 --> <script src="//maps.googleapis.com/maps/api/js?key=ここにAPIキーを書いてください" async></script>
17行目～18行目
scriptタグで、ネット上のjavascriptファイルを読み込みます。
大事なのは18行目の「ここにAPIキーを書いてください」の部分は、先ほど取得したAPIキーを書き換えてください。
<!-- google mapを表示するdiv --> <div id="maps"></div>
25行目～26行目
このdivタグ内に、地図が表示されます。「id名」のみ設定します。
<!-- Google Map を表示するjavascript -->
<script>
function initMap() {
～～省略～～
}
</script>
31行目～80行目
google mapを表示するjavascripです。
「initMap()」関数は、18行目でネット上のJSファイル（google map専用のJSファイル）を読み込んでいると、ページを読み込んだときに、実行される関数です。
console.log( ret );
77行目
テストファイルとして、コンソールにログを出しています。ブラウザで「F12」ボタンを押すと確認できます。
 |
本番環境では、ログを出したくないので、必ずコメントアウト「//」もしくは一文を削除しましょう。
現在位置ではなく、決まった住所を表示したい場合
<!-- 住所を指定して、Google mapを表示する場合 -->
<h2>住所を指定して表示「東京都府中市宮町3-1」</h2>
<div id="google_map" style="height:300px;width:500px;"></div>
<script src="https://maps.googleapis.com/maps/api/geocode/js?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=「ここにAPIキーを書いてください」" type="text/javascript"></script>
<script>
//COMTOPIA流Google MAP表示方法
var geocoder = new google.maps.Geocoder();//Geocode APIを使います。
var address = "東京都府中市宮町3-1";
geocoder.geocode({'address': address,'language':'ja'},function(results, status){
if (status == google.maps.GeocoderStatus.OK){
var latlng=results[0].geometry.location;//緯度と経度を取得
var mapOpt = {
center: latlng,//取得した緯度経度を地図の真ん中に設定
zoom: 15,//地図倍率1～20
mapTypeId: google.maps.MapTypeId.ROADMAP//普通の道路マップ
};
var map = new google.maps.Map(document.getElementById('google_map'),mapOpt);
var marker = new google.maps.Marker({//住所のポイントにマーカーを立てる
position: map.getCenter(),
map: map
});
}else{
alert("Geocode was not successful for the following reason: " + status);
}
});
</script>
とhtml内に、にコピペしてください。「ここにAPIキーを書いてください」は書き換えてください。
ちなみに少しエラーが出ますが、今のところ問題ない用なので保留します。
参考URL：http://comtopia.jp/google-map-api
・オプション
上記のサイトににて詳しく記載されています。
マップにマークを付けたり、コントロールバーを非表示にしたり、沢山のオプションがあります。
作成される環境によって、オプションを変更してみてはいかがでしょうか。
・まとめ
・今回の記事を書くにあたって参考にしたサイト
PHPで位置情報を取得してGoogleMapAPIで使用する方法
Google Map APIを使ってGoogleマップをWebサイトに掲載
参考にさせて頂いたサイトの管理者様、今回もありがとうございました。
Comments
検証ありがとうございましたcustom writings