Ajax通信でWordPressのデータベースから取得した情報を元にマーカーを表示させる方法

私が様々なものを参考に作成したものを載せる。このままコピペする場合、全角の空白があるとおもわれるので注意。

<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”の中身について見ることができる。 うまく参考にしてもらえると嬉しい。