私はJSとJqueryにかなり慣れていないので、誰かが助けてくれるかどうか疑問に思っています:)
私はこの次のコードを使用してマップを作成していますが、インラインで正常に動作します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Google Map with GPX track</title>
<style type="text/css">
html, body, #map_display { width: 100%; height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function gpx() {
var map = new google.maps.Map(document.getElementById("map_display"), {
mapTypeId: google.maps.MapTypeId.HYBRID
});
$.ajax({
type: "GET",
url: "/alan.gpx",
dataType: "xml",
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
});
var route = new google.maps.Polyline({
path: points,
strokeColor: "#FF00AA",
strokeOpacity: .7,
strokeWeight: 4
});
route.setMap(map);
map.fitBounds(bounds);
}
});
}
</script>
</head>
<body onload="gpx()">
<div id="map_display"></div>
</body>
</html>
これを外部の.jsファイルに入れようとしていますが、うまくいきません
これは JS ファイルです。スクリプトが呼び出されていることを知らせるアラートが表示されます。
alert ("hello from script");
function gpx() {
var map = new google.maps.Map(document.getElementById("map_display"), {
mapTypeId: google.maps.MapTypeId.TERRAIN
});
$.ajax({
type: "GET",
url: "alan.gpx",
dataType: "xml",
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
});
var poly = new google.maps.Polyline({
// use your own style here
path: points,
strokeColor: "#FF00AA",
strokeOpacity: .7,
strokeWeight: 4
});
poly.setMap(map);
// fit bounds to track
map.fitBounds(bounds);
}
});
}
$(document).on("ready", gpx);
私が使用しているhtmlファイルは
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Import GPX file to Google Maps</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="map_display"></div>
</body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ac-gpxscript.js"></script>
</html>
これを行うと、 Uncaught TypeError: Cannot read property 'offsetWidth' of null というエラーが返されます
私はjsファイルに何か小さなものが欠けていると確信していますが、私の人生ではもう何がわからないのですか
DOM の準備が整う前に JS が呼び出されていることは確かですが、$(document) コマンドは DOM の準備ができたときにのみ呼び出されると思いました