htmlファイルから外部ファイルに記述したjavascriptを読み込もうとすると
Uncaught SyntaxError: Unexpected token <
というエラーが出てしまい、直接html内にjavascriptを記述すると解決しました。
また、htmlファイルから、サーバー内に保存したjqueryのファイルを読み込もうとすると、
Uncaught SyntaxError: Unexpected token <
というエラーが出てしまい、サーバーにダウンロードしたファイルではなく、web上のソースから読み込むようにすると解決しました。
以上のようにすることで、jqueryが問題なく使えるようになり、javascriptも動くようになったのですが、そのjavascript内でサーバー内に保存したjsonファイルを読み込もうとすると、コンソールにはエラーメッセージは出ないのですが、読み込みに失敗しているようで、出力がされません。
これらのことを踏まえると、おそらくサーバー内の外部ファイルをhtmlから読み込む際に問題が発生し、エラーの原因になっていると考えられるのですが、全く改善方法が分かりません。
これらの原因にどなたか心当たりのある方はいらっしゃるでしょうか?
ちなみに当該htmlファイルとjquery、javascript、jsonファイルはすべて同一ディレクトリ内に置いてあります。
追記1:html
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 5 <meta charset="utf-8"> 6 <title>Info window with <code>maxWidth</code></title> 7 <style> 8 /* Always set the map height explicitly to define the size of the div 9 * element that contains the map. */ 10 #map { 11 height: 100%; 12 } 13 /* Optional: Makes the sample page fill the window. */ 14 html, body { 15 height: 100%; 16 margin: 0; 17 padding: 0; 18 } 19 </style> 20 <script src="https://maps.googleapis.com/maps/api/js?key=MY_APIKEY"> 21 </script> 22 <script> 23 function initMap(){ 24 // Map options 25 var options = { 26 zoom:5, 27 center:{lat:42.999988, lng:-71.888888} 28 }; 29 30 // Add map 31 var map = new google.maps.Map(document.getElementById('map'), options); 32} 33 34 35function loadJson_and_addMarkers(){ 36 var json = []; 37 $(function(){ 38 $.getJSON("new_data.json" , function(data) { 39 json = data; 40 }); 41 }); 42 for(var i = 0;i < json.length;i++){ 43 addMarker(json[i]); 44 } 45} 46 47 48 49 50function addMarker(json){ 51 var marker = new google.maps.Marker({ 52 positions:{lat:json.lat, lng:json.lng}, 53 map:map 54 }); 55 56 var content = '<h1>' + json.name + '</h1>'+ 57 '<div id="bodycontent">' + json.body + '</div>'; 58 59 var infowindow = new google.maps.InfoWindow({ 60 content:content 61 }); 62 63 marker.addListener('click', function(){ 64 infowindow.open(map, marker); 65 }); 66} 67 68 69 </script> 70 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 71 </script> 72 </head> 73 74 <body onload="initMap()"> 75 <div id="map"></div> 76 <form> 77 <p> 78 <input type="button" id="btn" value="make Markers" onclick="loadJson_and_addMarkers()" /> 79 </p> 80 </form> 81 </body> 82</html>
追記2:json
json
1[ 2 { 3 "body": "\u3002", 4 "lat": 35.668416, 5 "lng": 139.728201, 6 "name": "sample1", 7 }, 8 { 9 "body": "\u3002", 10 "lat": 35.868416, 11 "lng": 139.728201, 12 "name": "sample2", 13 }, 14 { 15 "body": "\u4e43\u3002", 16 "lat": 35.674565, 17 "lng": 139.71699, 18 "name": "sample3", 19 } 20]
このサイトを参考にjsonへの書き込み処理と読み込み処理を記述しました。
http://sanvarie.hatenablog.com/entry/2015/12/06/104506
追記3:
ごめんやん
回答1件
あなたの回答
tips
プレビュー