JQVMap:JavaScriptのファイルを持ってくるとき

2021年9月24日2023年4月8日

LaravelでjQueryを使おうと、blade.phpで<script type=”http://….jquery.min.js”></script>としてjQueryを呼び出したところ、うまく反映されませんでした。反映する方法を紹介します。

事の経緯

世界地図をアプリ上で描きたいと思い、調べていたら

JQVMapというきれいな世界地図がjQueryのライブラリがあったので、使いました。

JQVMap:https://www.10bestdesign.com/jqvmap/

JQVMapをダウンロードしてjQueryを呼び出し、アプリで確認しても、真っ白で世界地図が出ません。

実際のコード

<html>
  <head>
    <title>JQVMap - World Map</title>
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.vmap.js"></script>
    <script type="text/javascript" src="js/maps/jquery.vmap.world.js" charset="utf-8"></script>

    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#vmap').vectorMap({ map: 'world_en' });
    });
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 600px; height: 400px;"></div>
  </body>
</html>

JQVMapのドキュメントとほぼ同じコードです。(ファイルのパスだけ変えました。)

JQVMapのドキュメントや関係サイトをあさりましたが原因が分かりませんでした。