Googlemap API V. 3 전달 Python에서 Jinja2를 통해 Javascript로 마커

Question

GSQL 데이터베이스에 Google지도에 표시 할 수 있도록 자바 스크립트로 보내려는 마커 목록이 있습니다. 실제로, 내가 좋아하는 뭔가 보이는 파이썬 목록을 전달합니다 '. maplist'변수 같은 jinja2 템플릿을 통해

[[50.1142, .12231, "MarkerName"], [49.131, -.12232, "MarkerName2"], [48.131, -.12232, "MarkerName3"]] 

을

내 자바 스크립트 템플릿에 다음과 같습니다 : 목록을 통해

<script type="text/javascript"> 
     $(document).ready(function() { 
          var latitude = parseFloat("51.515252"); 
          var longitude = parseFloat("-0.189852"); 
          var latlngPos = new google.maps.LatLng(latitude, longitude); 
          // Set up options for the Google map 
          var myOptions = { 
          zoom: 10, 
          center: latlngPos, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 
          // Define the map 
          map = new google.maps.Map(document.getElementById("map"), myOptions); 

          }); 

    function addMarker(lat, lng, name){ 
      var point = new google.maps.LatLng(lat, lng); 
      var marker = new google.maps.Marker({position: point, 
               map: map, 
               title: name 
               }); 

          }; 

     </script> 

I 루프과 같이 :

{% for marker in maplist %} 
    <script type="text/javascript"> 
    addMarker(parseFloat('{{marker.1}}'),parseFloat('{{marker.2}}'),'{{marker.0}}'); 
    </script> 
    {% endfor %} 

그러나, 마커 중 어느 것도지도에 표시되지 않습니다. 나는 내 접근 방식이 최선이라고 확신하지 못한다. 그러나 나는 여기에서 그것을 보았다 : Parsing dictionary from GAE python to create marker objects in javascript/GMaps api, 그리고 나에게 의미가 있었다. 아마도 JSON이 더 나은 접근 방법입니다.이 경우 어떤 돌출 예제 (나는 기본적으로 전체 Javscript-neophyte입니다)를 매우 높이 평가할 것입니다.

Answer 1

개체 표기법을 사용하여 목록 인덱스에 액세스하려고합니다. 더 나은 JSON 객체의 배열을 만들려면 다음 템플릿에서

[{'lat': 123.3, 'lng': 234.5, 'name': "Foo"}] 

그리고 다음을 :

{{marker.lat}} 
{{marker.lng}} 

또한, 각 데이터 포인트에 대한 새로운 스크립트 태그를 만들 수 지나치게 복잡 보인다. 왜 모든 데이터에 액세스 할 수있는 기본 스크립트 태그에 변수를 만드는 것이 좋을까요? 좋아요 :

<script type="text/javascript"> 
    var data = {{data}} 
    $(document).ready(function() { 
         var latitude = parseFloat("51.515252"); 
         var longitude = parseFloat("-0.189852"); 
         var latlngPos = new google.maps.LatLng(latitude, longitude); 
         // Set up options for the Google map 
         var myOptions = { 
         zoom: 10, 
         center: latlngPos, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
         }; 
         // Define the map 
         map = new google.maps.Map(document.getElementById("map"), myOptions); 
         data.forEach(function(p) { 
          var point = new google.maps.LatLng(p.lat, p.lng); 
          var marker = new google.maps.Marker({position: point, 
              map: map, 
              title: p.name 
              }); 

          }) 
         }); 


    </script>