title: Django: using template tags inside of javascript for Google Maps
body: <p>I'm trying to use template tags in my javascript to make it dynamic and load maps according to the address sent. My map is working and my geocode as well. I can even pass the latitude and longitude to the template, but when I place it inside of javascritp it doesn't work as expected.</p>
  
  <p>For example:</p>
  
  <p>if the {{longitude}} is -122,0843845 in the HTML, I get on my alert( {{longitude}} ) only -122. It seems that I there is a problem in Django converting a dot to comma, like -122.08... to -122,08. Either way it didn't work even when I tried with integers like -122.</p>
  
  <p>Not sure if it is a float to string issue or something else, I'm quite new to javascript.</p>
  
  <p>The code.</p>
  
  <p>views.py</p>
  
  <p>class ImovelDetail(DetailView):
      model = Imovel</p>
  
  <pre><code>def get_context_data(self, *args, **kwargs):
      address = "1600 Amphitheatre Parkway, Mountain View, CA"
      api_key = "AIzaSyAiw0iU0egdeVrOKboOOZ2n1WXS3Os0WgI"
      api_response = requests.get('https://maps.googleapis.com/maps/api/geocode/json?address={0}&amp;key={1}'.format(address, api_key))
      api_response_dict = api_response.json()
  
      if api_response_dict['status'] == 'OK':
          context = super(ImovelDetail, self).get_context_data(**kwargs)
          latitude = api_response_dict['results'][0]['geometry']['location']['lat']
          longitude  = api_response_dict['results'][0]['geometry']['location']['lng']
          print(latitude)
          context.update({'latitude': latitude, 'longitude': longitude})
          return context
  </code></pre>
  
  <p>template.html</p>
  
  <pre><code>{% block js %}
      &lt;!-- &lt;script&gt;
      SOMETHING THAT I TRIED
          var latitude = {{ latitude }};
          var longitude = {{ longitude }};
      &lt;/script&gt; --&gt;
      &lt;script&gt;
      function initMap() {
          var address = {lat: {{latitude}}, lng:{{longitude}} };
  
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: address
          });
          var marker = new google.maps.Marker({
            position: address,
            map: map
          });
      }
      &lt;/script&gt;
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiw0iU0egdeVrOKboOOZ2n1WXS3Os0WgI&amp;callback=initMap"&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>