vikkeの趣味やらなんやらのごった煮blog

趣味の技術や音楽やバイクや写真のページ

hexoでgoogle mapの埋込みが出来ない

google map の埋込み

1
npm install hexo-tag-googlemaps --save
  1. https://developers.google.com/maps/documentation/javascript/get-api-key を参考に、google mapsを使う為のapiキーを取得する。
  2. blog/_config.ymlに google_maps_api_key として追加する。

あとは下記のように記述すれば良い。タグのくくりで地図を調整し、中のエントリでピンを調整する。ピンは複数指定出来る。まー、https://github.com/the-simian/hexo-tag-googlemaps に色々書いてある。

1
2
3
4
{% googlemaps latitude longitude zoom width height %}
title1, latitude, longitude
title2, latitude, longitude
{% endgooglemaps %}

なので、

1
2
3
{% googlemaps 35.766799 139.847587 15 100% 450px %}
亀有駅, 35.766799, 139.847587
{% endgooglemaps %}

とかで下記のようになる。

が、一瞬表示されてjsのエラー画面になる。
なぜーーーーーー!!!!

2020/01/19 追加

google cloud console の 「APIとサービス」-> 「ライブラリ」-> 「Maps JavaScript API」を有効化する事により動作するようになった。
やったぜ!!!!!