私はRubyonRailsとjavascriptを初めて使用します。プロジェクトでグーグルマップディレクションサービスを利用したい。それはhtmlでうまく動作しますが、私がそれを私のrailsプロジェクトに入れると、それは動作を停止し、エラーをスローします
ReferenceError：グーグルは定義されていません
var directionService = new google.maps.DirectionsService（）;
私は自分のコードを投稿します。以下も確認してください。
function initGeolocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
}
var geocoder;
var directionDisplay;
var map;
var marker;
alert("bahar");
var directionsService = new google.maps.DirectionsService();
alert("bahar666");
function success(position) {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: coords
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker=new google.maps.Marker();
marker.setPosition(coords);
marker.setMap(map);
directionsDisplay.setMap(map);
}
function calcRoute(startloc,endloc) {
var start = new google.maps.LatLng(startloc[0],startloc[1]);
var end =new google.maps.LatLng(endloc[0],endloc[1]);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
alert("satatus"+directionsService);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
else
{
alert("error in status"+status);
}
});
}
function getlonglat(address){
var loc3=[];
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
loc3[0]=results[0].geometry.location.lat();
loc3[1]=results[0].geometry.location.lng();
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
return loc3;
}
function codeAddress() {
var address1 = document.getElementById("routeStart").value;
var address2 = document.getElementById("routeEnd").value;
var loc1=getlonglat(address1);
var loc2=getlonglat(address2);
setTimeout(function() {calcRoute(loc1,loc2);},800);
}
function fail()
{
var err=document.getElementById("error_view");
err.innerHTML="An unknown error occurred."
}
<!DOCTYPE HTML>
<html>
<head>
<title>Basic GeoLocation Map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api /js?libraries=places&sensor=false"></script>
<script src="map.js" type="text/javascript"></script>
</head>
<body onload="initGeolocation();">
<p id="error_view"></p>
<div id="map_canvas" style="width: 600px; height: 400px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
<br><br>
<form action="#" onSubmit="codeAddress();return false;" id="routeForm">
<label>
From: <br />
<input type="text" id="routeStart" >
</label>
<label><br />
To: <br />
<input type="text" id="routeEnd" >
</label>
<script>
var autocomplete1 = new google.maps.places.Autocomplete($("#routeStart")[0], {});
var autocomplete2 = new google.maps.places.Autocomplete($("#routeEnd")[0], {});
google.maps.event.addListener(autocomplete1, 'place_changed', function() {
var place = autocomplete1.getPlace();
console.log(place.address_components);
});
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
var place = autocomplete2.getPlace();
console.log(place.address_components);
});
</script>
<input type="submit" value="Calculate route">
</form>
</body>
</html>