Google direction服务未在使用javascript的ruby on rails中运行
我不熟悉RubyonRails和javascript。我想在我的项目中使用谷歌地图方向服务。它在html中运行良好，但当我把它放在rails项目中时，它停止工作并抛出错误 ReferenceError:未定义google var directionsService=new google.maps.directionsService（） 我张贴我的代码也请检查下面Google direction服务未在使用javascript的ruby on rails中运行,javascript,ruby-on-rails,Javascript,Ruby On Rails,我不熟悉RubyonRails和javascript。我想在我的项目中使用谷歌地图方向服务。它在html中运行良好，但当我把它放在rails项目中时，它停止工作并抛出错误 ReferenceError:未定义google var directionsService=new google.maps.directionsService（） 我张贴我的代码也请检查下面 function initGeolocation() { if(navigator.geolocation)
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>
函数initGeolocation（）
{
if（导航器.地理位置）
{
navigator.geolocation.getCurrentPosition（成功，失败）；
}
其他的
{
警报（“对不起，您的浏览器不支持地理定位服务。”）；
}
}
var地理编码器；
方向显示；
var映射；
var标记；
警报（“巴哈尔”）；
var directionsService=new google.maps.directionsService（）；
警报（“bahar666”）；
功能成功（职位）{
geocoder=新的google.maps.geocoder（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
coords=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
变量myOptions={
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：coords
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
marker=新的google.maps.marker（）；
标记器。设置位置（坐标）；
marker.setMap（map）；
方向显示.setMap（地图）；
}
功能计算（startloc、endloc）{
var start=new google.maps.LatLng（startOC[0]，startOC[1]）；
var end=new google.maps.LatLng（endloc[0]，endloc[1]）；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING
};
警报（“satatus”+方向服务）；
路由（请求、功能（结果、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（结果）；
}
其他的
{
警报（“状态错误”+状态）；
}
});
}
函数getlonglat（地址）{
var loc3=[]；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
loc3[0]=结果[0]。几何体。位置。lat（）；
loc3[1]=结果[0]。几何体。位置。lng（）；
}
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
返回loc3；
}
函数代码地址（）{
var address1=document.getElementById（“routeStart”）.value；
var address2=document.getElementById（“routeEnd”）.value；
var loc1=getlonglat（地址1）；
var loc2=getlonglat（地址2）；
setTimeout（函数（）{calcRoute（loc1，loc2）；}，800）；
}
函数失败（）
{
var err=document.getElementById（“error_view”）；
err.innerHTML=“发生未知错误。”
}
基本地理位置图
发件人：
致：
var autocomplete1=新的google.maps.places.Autocomplete（$（“#routeStart”）[0]，{}）；
var autocomplete2=新的google.maps.places.Autocomplete（$（“#routeEnd”）[0]，{}）；
google.maps.event.addListener（autocomplete1，'place\u changed'，function（）{
var place=autocomplete1.getPlace（）；
console.log（位置、地址和组件）；
});
google.maps.event.addListener（autocomplete2，'place\u changed'，function（）{
var place=autocomplete2.getPlace（）；
console.log（位置、地址和组件）；
});