当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Integrate Google Maps Into a current Rails Application

问题描述:

Rails newbie here. I'm working on a project and I need to integrate google maps into a current rails application. I have the google maps javascript file working properly. My issue comes in when trying to integrate it with the current rails application. I have the html.erb file setup to reference the respective google maps js file, yet every time the page loads, I get an error in the console saying

"Failed to load resource: the server responded with a status of 404 (Not Found)"

in regards to the corresponding js file. Yet when I copy the javascript code into the html.erb file, google maps just loads fine. Any ideas on what I'm missing to have this setup working properly, I have been losing my mind over this for the past 24 hours and would greatly appreciate any help I can get. Thanks in advance!

EDIT: Adding the code and errors below.

Here is the core of the google maps js with angular, I have commented out everything except loading the core google maps below

var My_Map = angular.module('My_Map' , []);

My_Map.directive("myMaps", function() {

return {

restrict: 'E',

template: '<div></div>',

replace: true,

link: function (scope, element, attrs) {

var mapOptions = {

center: new google.maps.LatLng(34.0, -118.4),

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById(attrs.id),

mapOptions);

}

};

});

Here is the html erb code chunk

<html ng-app="My_Map">

<head>

<%= javascript_include_tag "dispatcher_script", "data-turbolinks-track" => true %>

<title>

Google Maps

</title>

<style>

#map-canvas{

height:750px;

width:1400px;

border:2px solid red;

}

</style>

</head>

<body>

<my-maps id="map-canvas"></my-maps>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?key=KEYHERE">

</script>

<script type="text/javascript"

src="/app/assets/javascripts/angular-animate.min.js.map">

</script>

<script type="text/javascript"

src = "/app/assets/javascripts/app/map_app.js">

</script>

And the console errors, stackoverflow wont let me post images, but its basically the following

Uncaught ReferenceError: google is not defined dispatcher_script.js:1646

Failed to load resource: the server responded with a status of 404 (Not Found) https://NAME.herokuapp.com/app/assets/javascripts/app/map_app.js

Failed to load resource: the server responded with a status of 404 (Not Found) https://NAME.herokuapp.com/app/assets/javascripts/angular-animate.min.js.map

Also, the file structure is rails compliant, have the js file placed in

app/assets/javascripts/app

and the html erb file is in

app/views/dispatchers

分享给朋友:
您可能感兴趣的文章:
随机阅读: