title: django: how to pass template variable to javascript onclick routine?
body: <p>The concept comes from this <a href="http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic" rel="noreferrer">http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic</a></p>
  
  <p>I enable 2 blocks in a django template, left blockshows device info (device name and location info),right block shows device map location.When user can click on left panels, the right map will change by passing Django template variable to Javascript routine.  It seems the passed variable is not accepted by <strong>init_map</strong>. </p>
  
  <p>when user click on left column, the right map will switch according to latlon, which is passed by onclick routine.   </p>
  
  <p>template page is as follows:</p>
  
  <pre><code>{% block content %}
  {% for device in devices %}  
  &lt;div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 "&gt;    
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "&gt;
          &lt;div class="panel panel-default"  onclick="init_map( {{ device.coordinates.latitude }}, {{device.coordinates.longitude }} );return false;"&gt;
              &lt;div class="row padall"&gt;                
                  &lt;div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"&gt;
                      &lt;span&gt;&lt;/span&gt;                                                           
                      &lt;img src="{{ device.thumbnail.url }}"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"&gt;
                      &lt;div class="clearfix"&gt;
                          &lt;div class="pull-left"&gt;
                              &lt;span class="fa fa-dollar icon"&gt;{{device.name}}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="pull-right"&gt;
                              {{device.coordinates  }} 
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;h4&gt;&lt;span class="fa fa-map-marker icon"&gt;&lt;/span&gt;{{ device.coordinates }}&lt;/h4&gt;
                          &lt;span class="fa fa-lock icon pull-right"&gt;{{  device.coordinates  }}&lt;/span&gt;
                          {% with lat_lon=device.coordinates %}       
                           new is   {{ lat_lon }}
                          {% endwith %}
                          &lt;/div&gt;                 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"&gt;
      &lt;div class="row padbig"&gt;  
          &lt;div id="map" class="map"&gt;&lt;/div&gt;       
      &lt;/div&gt;
   &lt;/div&gt;
   {% endfor %}
   {% endblock content %}
  
  
  
  {% block extra_js %}
  &lt;script type="text/javascript"  src="http://webapi.amap.com/maps?v=1.3&amp;key=a23b5e94cecc8e98acd039aba6cd064c"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript"&gt;
    var lat_lon  = {{ device.coordinates | js  }};  
  function init_map(lat,lon) {
  
      var imageLayer = new AMap.ImageLayer({
      url:'http://developer.amap.com/wp-content/uploads/2014/06/dongwuyuan.jpg',
          bounds: new AMap.Bounds(  
              new AMap.LngLat(116.327911, 39.939229),
              new AMap.LngLat(116.342659, 39.946275)),
  
          zooms: [15, 18] 
    });
      var map = new AMap.Map('map',{
             resizeEnable: true,
  
         scrollWheel: true,
  
         doubleClickZoom: true, 
         layers: [
             new AMap.TileLayer(),
             imageLayer
         ],
  
         view: new AMap.View2D({
             //center: new AMap.LngLat(116.342659, 39.946275),
            center: new AMap.LngLat(lat,lon),
             zoom:15
         })
        });  
      }
      //init_map(0);    
  &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>if I enabled "center: new AMap.LngLat(116.342659, 39.946275)," the map will show up, while with "center: new AMap.LngLat(lat,lon)," , no map show up.</p>