私が様々なものを参考に作成したものを載せる。このままコピペする場合、全角の空白があるとおもわれるので注意。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> var wp_url_admin_ajax = 'http://gyoubu.local/wp-admin/admin-ajax.php';</script> <script> var data = [] //空の配列"data"を定義 jQuery(function($) { $.ajax({ type: "POST", crossDomain: true, url: wp_url_admin_ajax, data: { action: "tell_me" }, success: function(response) { json = eval("(" + response + ")"); data = JSON.parse(response); //json形式で送られてきたデータを、さきに定義した配列"data"に代入している console.log(data) //console.logでAjex通信を用いてしっかりデータが送られてきているかチェック var markers = new Array(); //マップに表示するためのマーカーを入れる、空の配列を定義 var opts = { zoom: 15, center: {lat: 35.70157, lng: 139.745451}, //ここは具体的な数値でなく"data[0].lat, data[0].lng"としてもいいが、 //それらが文字列として送られてきている場合、ここより前に数値になおす必要がある。 mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),opts); for (i = 0; i < data.length; i++) { data[i].lat = parseFloat(data[i].lat); data[i].lng = parseFloat(data[i].lng); //送られてきた緯度と経度のデータが文字列として送られてきたので、浮動小数点をつけることができるfloat形式に変更している。 var marker_options = { map: map, position: new google.maps.LatLng(data[i].lat, data[i].lng), }; markers[i] = new google.maps.Marker(marker_options); var info = data[i].name + "<br>(1)料金は"+ data[i].min +"円です" + "<br>(2)料金は"+ data[i].free +"円です" + "<br>電話番号は"+ data[i].call +"です"//infoにマップ上に表示したいことを代入 dispInfo(markers[i],info); //dispInfoという関数。他の場所に作っておき、ここで呼び出している。 } } }); }); </script>
リンクテキスト に function dispInfo が記載してある。またWPのfunction.phpに記述した内容や”data”の中身について見ることができる。 うまく参考にしてもらえると嬉しい。