スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

東京周辺でつぶやかれたTweetを地図上に表示する

一部ではあるが、つぶやいた位置情報を特定出来るTweetがある。
TwitterのSearch APIで取得した後、GoogleMap上に表示してみた。

以前の記事「Twitterから特定の文字列を含むTweetを取得する方法」にて、
使用したSearch APIで、つぶやいた位置情報を特定して、
GoogleMap上にマーカーを立てて表示するサンプルを作ってみる。

以下は実装例のソースコード


<HTML>
<script type="text/javascript">
<!--
        function sleep(time){
            var d1 = new Date().getTime();
            var d2 = new Date().getTime();
            while( d2 < d1 + time ){
                d2 = new Date().getTime();
            }
        }
        function init() {
            //------
            // GoogleMap設定
            // -----
      //中心の設定
            var latlng = new google.maps.LatLng(35.693621999934926,139.74300384521484);
      //地図の初期設定
            var opts = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
             };
      //地図の生成
            var gmap = new google.maps.Map(document.getElementById('googlemap'),opts);

      //表示するつぶやきの数繰り返し処理する
      foreach ($tweet_list as $key => $value) { 
        if (isset($value['coordinates'])) { 

                  //------
                  // マーカーを立てる
                  //------
                  // マーカーオブジェクト作成
                  var marker<?php echo $num; ?> = new google.maps.Marker();
                  // マーカーオブジェクト作成(クリック時反応するように設定)
                  marker<?php echo $num; ?>.setClickable(true);
                  // 緯度経度設定
                  marker<?php echo $num; ?>.setPosition(
                  new google.maps.LatLng(
                  <?php echo($value['coordinates']['coordinates'][1]); ?>,
                  <?php echo($value['coordinates']['coordinates'][0]) ?>));
                  // 地図へ設定
                  marker<?php echo $num; ?>.setMap(gmap);

            //吹き出し表示処理(省略)

       }
      }
            gmap.setCenter(latlng);
        }
// -->
</script>


以下にサンプルを用意した。
東京周辺でつぶやかれたTweetを地図上に表示する
関連記事
スポンサーサイト



  

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。