Leafletでマーカーが表示されない

###前提・実現したいこと
CakePHP3でWebシステムの開発をしています。
OpenStreetMapを用いてマップ上にマーカーを表示させたいと思っています。
マップ自体は表示され、consolelogで緯度経度の情報を取得することに成功していることは確認しているのですが、マーカーが描画されません。
ajaxで緯度経度のデータをresponseで取得しています。

よろしくお願いします。
###該当のソースコード
/appname/webroot/js/hoge.js

Javascript
1$(function() {
2  /**
3   * フォームの初期表示
4   * @return {[type]} [description]
5   */
6  window.onload = function() {
7    //マップ画面表示
8      setMap();
9    }
10  
11  /**
12  * Map関連
13  */
14  var setMap = function(){
15    // 地図のデフォルトの緯度経度と拡大率
16    var map = L.map('map').setView([35.681,139.766], 12);
17    //OSMレイヤー追加
18    var tileLayer = L.tileLayer(
19      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
20        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
21        maxZoom: 18
22      }
23    );
24
25    var lat = [];               // 緯度
26    var lon = [];               // 経度
27              
28    //Geocoording処理を呼び、住所から緯度経度を取得する
29    $.ajax({
30      type:'POST',
31      url:'/ajax/ajax-geocoding',
32      dataType:'json',
33      data:{
34        prefecture:prefecture_name,
35        city:city_name,
36        town:town_name,
37        block:block_number
38      },
39      success: function(response){  
40          for(var i in response['latlons']){
41            lat[i] = response['latlons'][i]['lat'];
42            lon[i] = response['latlons'][i]['lon'];
43            }
44            
45            // 緯度経度をGeoJsonに渡す
46            var geojsonFeature = [];
47            geojsonFeature.unshift({
48                  "type": "Feature",
49                  "properties": {
50                    "marker": "マーカー"
51                    },
52                  "geometry": {
53                      "type": "Point",
54                      "coordinates": [lat[1], lon[1]]
55                      }
56                 });
57            // ポップアップに表示する
58            L.geoJson(
59              geojsonFeature,{
60                onEachFeature: function(feature, layer){
61                  if (feature.properties) {
62                    ayer.bindPopup(feature.properties.marker);
63                  }
64                }
65              }
66            ).addTo(map);
67
68            //JSON形式の位置情報を設定
69            tileLayer.addTo(map);
70      },
71      error: function(response){
72        alert('ajaxGeocoding エラ--');
73      }
74    })
75  }
76});
77

###補足情報
http://unguis.cre8or.jp/web/6341
こちらのサイトを参考にコードを書きました。

// ポップアップに表示する
の直前でgeojsonFeatureを確認したところ、下記の値を取得していました。

Array(1)
	0:Object
		geometry:Object
			coordinates:Array(2)
				0:35.69853
				1:139.757108
			length:2
			__proto__:Array(0)
			type:"Point"
			__proto__:Object
		properties:Object
			marker:"マーカー"
			__proto__:Object
		type:"Feature"
		__proto__:Object
		length:1
		__proto__:Array(0)

kei344

2017/04/08 02:49

タイトルは「OpenStreetMap」ではなく「Leaflet」が適切なのでは？また、エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error あと、geojsonFeatureの中身を「ポップアップに表示する」の直前で確認して質問文に追記してください。

行動規範の内容に同意します

回答2件

この質問の状態だと、単純にデバッグしてください、といっているのと変わりがないので、まずは原因の切り分けをしてください。

・/ajax/ajax-geocoding は正しい結果を返していますか？
json 形式で返しているかを確認。
何かエラーを返していないかを確認

・マーカー画像のパスは正しい状態ですか？

いずれも、JavaScript での処理がされていますし、HTML上で動くものなので、ブラウザに備わっている開発ツール（デベロッパーツール）で詳細なエラーを確認できます。

例
http://www.buildinsider.net/web/chromedevtools/01

投稿2017/04/08 02:48

退会済みユーザー

総合スコア0

chi_tana

2017/04/08 11:27 編集

>・/ajax/ajax-geocoding は正しい結果を返していますか？下記の情報を返していましたので、json形式で返していると思います。 response = Object {latlons: Array(3)} response:Object latlons:Array(3) 0:Object addressing_system_flag:1 block_number:5 city_name:"千代田区" coordinate_number:9 history_after_update_flag:0 history_before_update_flag:0 lat:35.6848 lon:139.731181 prefecture_name:"東京都" 1:Object 2:Object エラーについては、下記の例外がconsoleに出力されていました。こういった内容のことでしょうか？ chrome-extension://gencefjnoopnjaoneaaopndiipdcllnb/Launcher.js:20 FocusManager.parse_for_input on DOM mutation event ×印が表示される通常のエラーはコンソールに表示されませんでした。

行動規範の内容に同意します