ITOBEN STYLE > EC-CUBE3 > EC-CUBE「当サイトについて」などで、GoogleMapが表示されない。（管理画面では緯度・経度が登録されている） 2016年8月31日カテゴリー: EC-CUBE3 EC-CUBE「当サイトについて」などで、GoogleMapが表示されない。（管理画面では緯度・経度が登録されている） Google Maps の使用において、Google Maps API キーが必要になったことが原因だと思われます。 随分前には、APIキーが必要でしたが一旦は不要になりました。 ところが、それがまた必要になったようです。 ↓こちらのページの「Google Maps API をロードする」に説明あり。 https://developers.google.com/maps/documentation/javascript/tutorial#HTML5 場合によっては、APIキーがなくても、動いたり動かなかったりのようですが・・・。 サーバに依存しているのかもしれませんが、原因は不明です。 次の方法で解決できます。 1 EC-CUBE2系 （1）APIキーを取得する https://developers.google.com/maps/documentation/javascript/get-api-key （2）■data/Smarty/templates/default/site_frame.tpl 173行目付近、赤字を変更 ——————————————– <!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–> <script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?sensor=false“></script> <!–{else}–> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script> <!–{/if}–> ——————————————– ↓【変更】 ——————————————– <!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–> <script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?key=YOUR_API_KEY“></script> <!–{else}–> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?key=YOUR_API_KEY“></script> <!–{/if}–> ——————————————– YOUR_API_KEYは取得したAPIキーに置き換えて下さい。 （3）管理画面 ■data/Smarty/templates/admin/main_frame.tpl 37行目付近、赤字を変更 ——————————————– <!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–> <script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?sensor=false“></script> <!–{else}–> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script> <!–{/if}–> ——————————————– ↓【変更】 ——————————————– <!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–> <script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?key=YOUR_API_KEY“></script> <!–{else}–> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?key=YOUR_API_KEY“></script> <!–{/if}–> ——————————————– YOUR_API_KEYは取得したAPIキーに置き換えて下さい。 2 EC-CUBE3系 ■src/Eccube/Resource/template/default/Help/about.twig 27行目付近、赤字を変更 ——————————————– <script src=”//maps.googleapis.com/maps/api/js?sensor=false“></script> ——————————————– ↓【変更】 ——————————————– <script src=”//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY“></script> ——————————————– YOUR_API_KEYは取得したAPIキーに置き換えて下さい。
Google Maps の使用において、Google Maps API キーが必要になったことが原因だと思われます。
随分前には、APIキーが必要でしたが一旦は不要になりました。
ところが、それがまた必要になったようです。
↓こちらのページの「Google Maps API をロードする」に説明あり。
https://developers.google.com/maps/documentation/javascript/tutorial#HTML5
場合によっては、APIキーがなくても、動いたり動かなかったりのようですが・・・。
サーバに依存しているのかもしれませんが、原因は不明です。
次の方法で解決できます。
1 EC-CUBE2系
（1）APIキーを取得する
https://developers.google.com/maps/documentation/javascript/get-api-key
（2）■data/Smarty/templates/default/site_frame.tpl
173行目付近、赤字を変更
——————————————–
<!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–>
<script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?sensor=false“></script>
<!–{else}–>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>
<!–{/if}–>
——————————————–
↓【変更】
——————————————–
<!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–>
<script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?key=YOUR_API_KEY“></script>
<!–{else}–>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?key=YOUR_API_KEY“></script>
<!–{/if}–>
——————————————–
YOUR_API_KEYは取得したAPIキーに置き換えて下さい。
（3）管理画面
■data/Smarty/templates/admin/main_frame.tpl
37行目付近、赤字を変更
——————————————–
<!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–>
<script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?sensor=false“></script>
<!–{else}–>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false“></script>
<!–{/if}–>
——————————————–
↓【変更】
——————————————–
<!–{if ($smarty.server.HTTPS != “”) && ($smarty.server.HTTPS != “off”)}–>
<script type=”text/javascript” src=”https://maps-api-ssl.google.com/maps/api/js?key=YOUR_API_KEY“></script>
<!–{else}–>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?key=YOUR_API_KEY“></script>
<!–{/if}–>
——————————————–
YOUR_API_KEYは取得したAPIキーに置き換えて下さい。
2 EC-CUBE3系
■src/Eccube/Resource/template/default/Help/about.twig
27行目付近、赤字を変更
——————————————–
<script src=”//maps.googleapis.com/maps/api/js?sensor=false“></script>
——————————————–
↓【変更】
——————————————–
<script src=”//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY“></script>
——————————————–
YOUR_API_KEYは取得したAPIキーに置き換えて下さい。