先日の記事で、「Google Mapsを利用する場合はAPIキーが必須になった」という話で一旦区切りましたが、今回はその続きを書こうと思います。
APIって何だ？
そもそもAPIって何ぞや？って話なんですが、ググってみると
「APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。」
出典：ITトレンド様
http://it-trend.jp/words/api
例で言うと、jQueryとかかな？
（jQueryにキーは必要ないけども）
では、APIキーは？
「あるWebサービスが持つサイトの機能を、外部のサイトやアプリケーションから利用できるようにする際に発行する暗号鍵のこと。」
出典：何でもパソコン用語辞典様
http://www.nan-paso.com/w-1459.html
ということは、
プログラムを利用するために、Google Mapでもその暗号鍵が必要になったということですね。
で、早速、APIキーを取得してみました。
※ソースコードを見ると、キーも見えてしまうので、ここで出しても問題はないようです。
APIキーを取得するのは他所様でも親切に解説されているので、割愛します。
（ほんとは、あたふたしてて、スクショするのを忘れました…orz）
これを、前回のマップのコードに貼り付けます。
貼り付けてみよう
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー"></script>
<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(36.255858, 138.888206);/* 座標 */
var myOptions = {
zoom: 16, /*拡大比率*/
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map1'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('https://masa-p.net/demo/map/icon.png',/*画像url*/
new google.maps.Size(106,119),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '富岡製糸場',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#003366' },
{ "saturation": -100 },
{ "lightness": 10 },
{ "gamma": 1.15 }
]
}
];
var styledMapOptions = { name: '富岡製糸場' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>
<div id="map1" style="width:630px; height:300px; margin:0 auto;"></div>
２行目にあるコード
<script src=”https://maps.googleapis.com/maps/api/js?key=取得したAPIキー”></script>
に、取得したAPIキーを貼り付けて下さい。
参照はこちら。
Google Maps API
まとめ
実は、ドメインによって出たり出なかったりしてるようです。
うちのサイトは共有サーバーは「pupu.jp」ですが、それだと表示されるのですけど、
独自ドメインの「masa-p.net」では表示されませんでした。
あと、Google Mapでは、無料での利用は回数制限があるそうで、
企業などでお使いになる方は、是非、ご確認された方がいいですね。
