0

私のレールプロジェクトでは、Googleマップにある次のコードの一部は次のとおりです。

function initialize_google_maps() {
    var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>);
    var zoom = <%= @kms_range %> > 9 ? 9 : 10;
    var myOptions = {
        zoom: zoom,

などなど…

問題は次のとおりです。

(<%= @user.lat %>, <%= @user.lng %>);

<%= @user.lat %> と <%= @user.lng %> を文字列に変換して、javascript または jquery が理解できるようにするにはどうすればよいですか?

ajax の理由から、このコードを script タグの間に入れることはできません。これを jquery 関数にして、値 <%= @user.lat %> と <%= @user.lng %> を jquery が理解できるものに代入する必要があります。

<script type="text/javascript">
  var map;
  var markers = [];

  function initialize_google_maps() {
    var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>);
    var zoom = <%= @kms_range %> > 9 ? 9 : 10;
    var myOptions = {
        zoom: zoom,
        center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}});
    map.setCenter(currentlatlng);
    map.setZoom(zoom);

    var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: <%= @kms_range %>*1000,
    });
    circle.bindTo('center', marker, 'position');

  }

  function show_markers() {
    if (markers)
      for(i in markers) {
        markers[i].setMap(map);
      }
  }

  function add_marker(location) {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
    // markers.setVisible(false);
  }

  function initialize_markers() {
    <% (@reviews || []).each do |r| %>
      <% next unless r.lat && r.lng %>
      position = new google.maps.LatLng(<%= r.lat %>, <%= r.lng %>);
      add_marker(position);
    <% end %>
  }

  $(function() {
    initialize_google_maps();
    initialize_markers();
    show_markers();
  });

</script>
4

1 に答える 1