

jsfiddle上でgmaps.jsを動かしたいのですが動きません

どう設定すれば使えるのでしょうか？

<http://jsfiddle.net/Lsx7fabb/>

[code]

    var type = '';
    
    function ryo() {
      type = 'ryo';
      alert("りょうちんとして位置情報を送信します。");
    }
    
    function maro() {
      type = 'maro';
      alert("まろしとして位置情報を送信します。");
    }
    
    window.onload = function() {
    
      setInterval(function() {
        GMaps.geolocate({
          success: function(position) {
            dataStore.send({
              lat: position.coords.latitude,
              lon: position.coords.longitude,
              type: type
            });
          },
          error: function(error) {
            console.log('Geolocation failed: ' + error.message);
          },
          not_supported: function() {
            console.log('Your browser does not support geolocation');
          },
          always: function() {
            console.log('done');
          }
        });
      }, 5000);
    
    
      var lat = 35.710285;
      var lng = 139.77714;
      var map = new GMaps({
        div: "#map",
        lat: lat,
        lng: lng,
        zoom: 17
      });
    
      dataStore.on('send', function(data) {
        var lat = data.value.lat,
          lng = data.value.lon;
    
        var img = '';
        if (data.value.type == 'ryo') {
          img = 'http://i.gyazo.com/7502afdcf0bbcc1f6d8f3d85e66616f6.png';
        } else if (data.value.type == 'maro') {
          img = 'http://i.gyazo.com/f7b2e1dac073595c3e53a260413aec14.png';
        }
    
        map.setCenter(lat, lng);
        map.addMarker({
          lat: lat,
          lng: lng,
          title: "LIG社員",
          icon: img,
          infoWindow: {
            content: "<p>LIG社員は<br/>ココだよ!</p>"
          }
        });
        console.log('recieve', data.value);
      });
    
    };
    
    
    <
    div id = "map" >
      <
      button onClick = "ryo()" >
      りょうちん
    
      <
      button onClick = "maro()" >
      まろし
[/code]

[code]

    <link rel="stylesheet" href="./foundation.css"><style>@charset "utf-8";
    #map {
      height: 400px;
    }
    
    </style>
[/code]

[code]

    <title>gmapsサンプル</title>
    
    
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="./gmaps.js"></script>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script>
      var dataStore = new MilkCocoa("https://{io-bi2tzwnsk}.mlkcca.com").dataStore('chat');
[/code]


CC BY-SA 4.0
2014-12-17T06:56:51.133
1884
2019-12-13T18:03:02.230
2019-12-13T18:03:02.230
32986
4530
question
javascript milkcocoa
jsfiddle上でgmaps.jsを動かしたいのですが動きません。


`gmaps.js`のパスをCDNのものに変更するのはどうでしょうか。

例えば`//cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js`が利用できそうです。

(但し、質問にあるリンク先のコードはHTMLとJS,CSSの記述をうまく分離できていないなど問題があり、そのままでは動かなそうに見えます。)


CC BY-SA 3.0
2014-12-17T09:09:02.430
1898
2014-12-17T09:09:02.430
3313
1884
answer


この jsfiddle には複数の問題があります。

まず、jsfiddle の使い方が間違っています。 正しい使い方は次のようになります：
[jsfiddle](http://jsfiddle.net/Lsx7fabb/3/)

  * js のライブラリーは左の「External Resources」に挿入
  * HTMLの欄にはHTMLだけを挿入。CSS と js も同様に
  * 相対URLは使えません。あなたが使った `./gmaps.js` や `foundation.css` は、ブラウザーが見つけられません。できれば、以下の様なCDNを利用します： 
    * foundation: `//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.css`
    * gmaps: `//cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js`
  * ボタンに付いた function はイベントハンドラーで作ったほうがいいでしょう。jsfiddle の JavaScript 欄は別のスコープとなります。
  * Google Maps のライブラリーを使うには API Key が必要です。URL は以下の様になります `https://maps.googleapis.com/maps/api/js?key=API_KEY`

Google Maps の API Key がないと、結果は確認できません。


CC BY-SA 3.0
2014-12-17T09:38:01.620
1904
2014-12-17T09:50:52.837
2014-12-17T09:50:52.837
2944
4602
1884
answer


外部のJavaScriptファイルを読みこみたいのであれば、左にあるExternal Resourcesに追加してください。

今回の場合は`//cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js`を追加すれば`gmaps.js`を使用することが出来ると思います。

ただしjsfiddleの根本的な使い方がわかっていないようなので、一度シンプルなコードで練習してみたほうがいいかと思います。


CC BY-SA 3.0
2014-12-17T09:39:03.387
1905
2014-12-17T09:39:03.387
4604
1884
answer