このページでは Google マップの要素を表示できませんでした。 指定した Google API キーが無効であるか、またはこのサイトでは使用が許可されていません。
と出てしまいます。設定したことは以下です。
console.developers.google.comでブラウザ API キーを設定しkeyを取得し、リファラ―を設定。
ヘッダ部分で
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" style="">
<script src="https://maps.googleapis.com/maps/api/js?key={keykeykey}"></script>
と追加。
フッタ部分で
jQuery(window).load(function() {
var latlng = new google.maps.LatLng(xxxxxxx, xxxxxx);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
});
何が原因なのかお心当たりがあればご教授いただけませんでしょうか。
よろしくお願いいたします。
現在sensorパラメータは必要なくなっているそうですし、2度呼び出しているのでその影響かも知れません。
また、リファラの制限がうまく行っていない可能性もあります。まずは設定せずに試してはどうでしょう。
加えて、Google Maps JavaScript APIが有効になっているか今一度確認してみてはどうでしょう。
さらにそれでもダメなら、一旦オプションはなしにして試してみてはどうでしょうか。
https://developers.google.com/maps/documentation/javascript/tutorial#Troubleshooting
https://syncer.jp/google-maps-javascript-api-matome#sec-1-5