Карты Google и ROR 3.1 - PullRequest
Новая
       12

Карты Google и ROR 3.1

2 голосов
/ 19 сентября 2011

Я пытаюсь заставить Google Maps 'Hello World' работать в ROR 3.1, используя следующий код:

в app / assets / javascripts / application.js 

$(document).ready(function(){
    initialize($("div#map_canvas").get(0));
  });

function initialize(element) {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(element, myOptions);
  alert("test");
}

в моем представлении модели частично app / views / rides / _ride.html.erb 

<li>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</li>

У меня есть это в app / views / layouts / application.html.erb 

 <%= javascript_include_tag :application,  
    "http://maps.googleapis.com/maps/api/js?sensor=false" %>

Я новичок в ROR, поэтому любая помощь в том, что я делаю неправильно, приветствуется.Похоже, что JavaScript запускается (появляется предупреждение), но карта никогда не отображается.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 19 сентября 2011

По вашему мнению 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

В вашем Javascript 

  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

В вашем CSS 

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }

И включите это в свой макет / приложение 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
1 голос
/ 19 сентября 2011

Во-первых, при использовании <%= javascript_include_tag :defaults %> этот помощник по тегам должен автоматически включать application.js (если он присутствует) в конце после включения других js-файлов по умолчанию.

Карта не загружается, потому чтофайл js карты Google не включен должным образом.Помощник javascript_include_tag принимает путь к файлам JavaScript, как относительным, так и абсолютным.В вашем случае он принимает абсолютный путь только с параметрами, он не отправляет параметры, такие как sensor = false.Вот почему вы получаете предупреждение в конце кода, но карта не генерируется.Если вы проверите HTML страницы, где это делается, вы увидите, что js-файл, который будет включен, это 

<script src="http://maps.googleapis.com/maps/api/js?sensor=false.js" type="text/javascript"></script>

, что неправильно.Используя приведенную ниже строку, вы можете включить ее правильно, так как параметры будут переданы правильно. 

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type=text/javascript"> </script>

Поэтому используйте теги HTML-сценариев, чтобы включить JavaScript карты Google.

Методы jQuery для манипулирования DOM и т. Д. В основном возвращают объект jQuery, который не является элементом HTML DOM.Инициализация карты Google для отображения карты требует элемента DOM, к которому может обратиться document.getElementById(id); (я думаю, что может быть метод, который jQuery предоставляет для преобразования объекта jQuery в элемент DOM, посмотрите его.).Надеюсь, это поможет, я мог бы опубликовать jsFiddle с рабочим кодом, но решил написать все это, так как проблема также связана с Rails.Дайте мне знать, если вам потребуется дополнительная помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...