1

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

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

http://jsfiddle.net/Lsx7fabb/

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()" >
  まろし
<link rel="stylesheet" href="./foundation.css"><style>@charset "utf-8";
#map {
  height: 400px;
}

</style>
<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');

3
  • 4
    ソースコードはリンクで張るのではなく、質問の中に含めるようにした方が、回答者の助けになります。また、「動きません」というのはあまりにも漠然としています。エラーの内容等を質問に含めるようにしてください。
    – tomute
    Commented 2014年12月17日 15:46
  • jsfiddle、gmaps.jsのタグを追加しました。
    – tomute
    Commented 2014年12月17日 15:47
  • ありがとうございます。気をつけます。
    – jack5
    Commented 2014年12月17日 19:02

3 件の回答 3

2

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

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

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

2

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

まず、jsfiddle の使い方が間違っています。 正しい使い方は次のようになります: jsfiddle

  • js のライブラリーは左の「External Resources」に挿入
  • HTMLの欄にはHTMLだけを挿入。CSS と js も同様に
  • 相対URLは使えません。あなたが使った ./gmaps.jsfoundation.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 がないと、結果は確認できません。

2
  • @madapaja 編集ありがとうございます!
    – southrop
    Commented 2014年12月17日 9:51
  • 回答ありがとうございます。試してみます!
    – jack5
    Commented 2014年12月17日 19:04
1

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

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

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

1
  • 回答ありがとうございます!
    – jack5
    Commented 2014年12月17日 19:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。