<!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>
//以下追記事項-->
<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>
