Google Mapをhtmlファイルに埋め込む2

2016年9月22日  HTML,ホームページ作成 

map
先日の記事で、「Google Mapsを利用する場合はAPIキーが必須になった」という話で一旦区切りましたが、今回はその続きを書こうと思います。

APIって何だ?

apittenanzoya
そもそもAPIって何ぞや?って話なんですが、ググってみると
「APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。」
出典:ITトレンド様
http://it-trend.jp/words/api 
例で言うと、jQueryとかかな?
(jQueryにキーは必要ないけども)
 

では、APIキーは?
「あるWebサービスが持つサイトの機能を、外部のサイトやアプリケーションから利用できるようにする際に発行する暗号鍵のこと。」
出典:何でもパソコン用語辞典様
http://www.nan-paso.com/w-1459.html 
ということは、
プログラムを利用するために、Google Mapでもその暗号鍵が必要になったということですね。
 

で、早速、APIキーを取得してみました。
apikey
※ソースコードを見ると、キーも見えてしまうので、ここで出しても問題はないようです。
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('http://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>

 
2行目にあるコード
<script src=”https://maps.googleapis.com/maps/api/js?key=取得したAPIキー”></script>
に、取得したAPIキーを貼り付けて下さい。
 

参照はこちら。
Google Maps API
https://developers.google.com/maps/

まとめ

実は、ドメインによって出たり出なかったりしてるようです。
うちのサイトは共有サーバーは「pupu.jp」ですが、それだと表示されるのですけど、
独自ドメインの「masa-p.net」では表示されませんでした。
 
あと、Google Mapでは、無料での利用は回数制限があるそうで、
企業などでお使いになる方は、是非、ご確認された方がいいですね。

  

*ランキングに参加中です。宜しくお願いします。

にほんブログ村 人気ブログランキング ブログ王ランキング   
pipipi
577