javascript - 複数の Django 変数を許可しない Google マップの情報ウィンドウ

Question

Google マップ API を使用して、比較的単純な情報ウィンドウを設定しようとしています。django バックエンドから情報ウィンドウに複数の変数を入れたいです。変数を 1 つだけ含めると、正常に機能します。ただし、複数の変数を含めようとすると、何もレンダリングされません。理由がわかりません。これは問題のある行です：

'<h1 id="infolayer-title" class="firstHeading">{{ variable1 }} {{ variable2 }}</h1>'+

ただし、奇妙なことに、これは正常に機能します。

'<h1 id="infolayer-title" class="firstHeading">{{ variable1 }}</h1>'+

変数はマークアップで適切にレンダリングされていますが、javascript エラーがあります。JavaScriptコンソールはSyntaxError: missing ; before statement上記の行に表示されますが、変数の前後にセミコロンを含めても問題は解決しません.

完全な実装は次のとおりです (そのほとんどは、maps api docs から直接引用しています)。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(122, 5);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
      '<div id="infolayer">'+
      '</div>'+
      '<h1 id="infolayer-title" class="firstHeading">{{ variable1 }} {{ variable2 }}</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'Heritage Site.</p>'+
      ...
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
 }

google.maps.event.addDomListener(window, 'load', initialize);

情報レイヤー ウィンドウで複数の変数を使用してマップをレンダリングするにはどうすればよいですか? この紛らわしい問題に役立つアイデアをありがとう!