index.html

Yusuke 32views 更新:2016年6月29日
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    //&#x4EE5;&#x4E0B;&#x8FFD;&#x8A18;&#x4E8B;&#x9805;--&gt;
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script> //JQueryライブラリの取得
    <script type="text/javascript">
      var map_canvas;


      function initialize_map() {
//        var map_center = new google.maps.LatLng(35.6745973, 139.7778069); // 八丁堀駅の座標

        var data =new Array();
        data.push({lat:'35.681382', lng:'139.766084', name:'東京駅'});
        data.push({lat:'35.672559', lng:'139.743888', name:'首相官邸'});
        data.push({lat:'35.555904', lng:'139.653419', name:'慶應義塾大学'});

//        console.log(data); // 正常に起動しているかの確認用、google chrome developerツールで確認できる

        var myLatlng = new google.maps.LatLng(data[0].lat, data[0].lng); //中心座標を決めるためのもの

        var map_options = {
          mapTypeId: google.maps.MapTypeId.SATELLIT,
          center: myLatlng,
          zoom: 14,
        };

        map_canvas = new google.maps.Map(document.getElementById("map_canvas"), map_options);




        //マーカーをfor文で作成してみる
        var markers = new Array();
        var i;

        for (i = 0; i < data.length; i++) {
          console.log(data[i].lat+","+data[i].lng);
            markers[i] = new google.maps.Marker({position: new google.maps.LatLng(data[i].lat, data[i].lng), map: map_canvas});
        }



        //以下AJax通信用のコード
        // 以下Ajax通信用のブラウザ側の処理の追記事項(クラインアント側の処理)

//    <script src="http://code.jquery.com/jquery-3.0.0.min.js"> 一番上に移動した


        //Ajaxに処理の合図を出す JavaScriptでwp-admin/admin-adjax.phpへリクエストを送信することで、任意のPHP関数を呼び出すことができ
        //そこから送り返された情報をもとにJavaScriptで結果の出力する。リクエスト時にはactionパラメイタに対してアクション名を渡す、

        jQuery(function ($) {
          $.ajax({
            type: 'POST',
            url: 'http://192.168.3.229/wp-admin/admin-ajax.php', //urlの指定にはここではphp形式で記述できないので、ベタ書きする
            crossDomain: true,
            data: {
              'action': 'tell_me'
            },

            //受け取ったJSONファイルを元に戻してブラウザに渡す
            success: function (response) {
              var json = eval("(" + response + ")");
              if (json.err) {
                result = "error:404";
              } else {

//                console.log(json);

                var mkrs = Array(); //marker の配列を用意

                for (var j = 0; j < json.length; j++) {

                  mkrs.push({lat: json[j]["Latitude"], lng: json[j]["Longitude"], name: 'hogehoge'}); //lat ido  longi keido

//                  new google.maps.Marker({position: new google.maps.LatLng(json[j]["Latitude"], json[j]["Longitude"]), map: map_canvas});

                }

//                console.log(data);  //json データを連想配列に積み直ししている
                console.log(mkrs);

                var len = mkrs.length;

                for (var k = 0; k < len; k++) {

//              console.log(i);
//              create_marker(mkrs[i].lat, mkrs[i].lng);
//              console.log(data[i].lat+","+ data[i].lng);

//              new google.maps.Marker({position: new google.maps.LatLng(mkrs[k].lat, mkrs[k].lng), map: map_canvas});
                  new google.maps.Marker({position: new google.maps.LatLng(mkrs[k].lat, mkrs[k].lng), map: map_canvas});

                }
              }
            }
          });
        });




      }


      //以下マーカーを表す関数
      function create_marker(lat, lng){
        var marker_options = {
          map: map_canvas,
          position: new google.maps.LatLng(lat, lng),
          zIndex: 0
        };

        var marker = new google.maps.Marker(marker_options);
      }

      google.maps.event.addDomListener(window, "load", initialize_map);




    </script>

  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません