1. casa
  2. Domanda e risposta
  3. È possibile inserire Javascrip di Google Map nella pipeline Asset (Rails)?

È possibile inserire Javascrip di Google Map nella pipeline Asset (Rails)?

2013-01-13 6 views
8

Ho aggiunto il javascript necessario per caricare le mappe di Google nella mia pagina:È possibile inserire Javascrip di Google Map nella pipeline Asset (Rails)?

<% content_for :head do %> 

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"> 
</script> 
<script type="text/javascript"> 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(<%[email protected]%>, <%[email protected]%>), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
} 
</script> 

<% end %>

come potete vedere ho bisogno di passare i parametri di latitudine e longitudine quando ho caricare la mappa. Come ho detto nel titolo, voglio inserire questi javascript nella pipeline degli asset, è possibile se sì come? grazie

fonte

2013-01-13 dbonadiman

risposta

12

Non è necessario includere l'API di Google Maps nel file application.js generato dalla pipeline di asset. Invece dovrebbe essere incluso come tag <script>prima del il tuo tag application.js<script>.

È quindi possibile aggiungere il metodo initialize() in qualsiasi file incluso nella pipeline degli asset, incluso lo application.js stesso.

Probabilmente vuole fare @lat e @lon argomenti del tuo metodo initialize però in modo che possano essere definiti all'interno delle pagine <head>. Ad esempio, si potrebbe avere

<head> 
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></script> 
    <%= javascript_include_tag "application" %> 

    <script> 
    var latitude = <%= @lat %>; 
    var longitude = <%= @lon %>; 
    </script> 
</head>

e nel file application.js si potrebbe avere

function initialize(latitude, longitude) { 
    var mapOptions = { 
     center: new google.maps.LatLng(latitude, longitude), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
} 

$(function() { 
    initialize(latitude, longitude); 
});

fonte

2013-01-13 22:47:11 deefour

+0

Grazie, e dirò che questa implementazione mi ha permesso di usare google maps con turbolinks :) – dbonadiman

Problemi correlati

 Problemi correlati