Google Maps API 3にGeodjangoを統合するには？私と一緒にGoogle MapsのAPIで、私がマーカーとして使用したい

Question

私はいくつかのフィールドを含むgeodjangoのクエリセットを持っていますが（ポイントフィールド）のみuser_nameとlocationを使用したい3.

ベア私にはわからないようJavascriptと私は一連の質問があります。
は、初心者のための概念ブレーンストーミングとしてこれを取る：

1. 私のSOの検索は、私はクエリセットがJSONに オブジェクトシリアライズする必要があることを示唆しています。私は組み込みのシリアライザモジュールを使用してJSONに変換します。
   JSONオブジェクトがviews.pyに変換されていると思います（ としましょう。json_data）。これらのJSONオブジェクトはPostGISデータベースに格納されていますか？冗長ではないでしょうか？さらに

2. 、どのように私はmap.js（Google MapsのAPI 3）のJavaScriptファイルでそれらを参照していますか？
   JSONオブジェクトをインポート（リンクをインポートする）して、位置マーカーとして表示します。

3. javascript変数を宣言して反復する方法を知りたい locations

For var(i=0;i< locations.length;i++){[ 
[json_data.user_name, json_data.point], 
] 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(49.279504, -123.1162), 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var infowindow = new google.maps.InfoWindow(); 
var marker, i; 
for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 

私は不必要に単純な作業を行うための複雑な方法を行った場合は、私をガイド。

Answer 1

TL; DRは

1. はありません、何をやっていることは冗長ではないと何も取得のこれらの回答からデータベースに書き込みます。
2. データにアクセスするには、getJSON()などのAPIエンドポイントへの呼び出しを行う必要があります。
3. 2番目の呼び出しでそれを実行し、それをリストとして宣言できます。

考えていることはかなり正しいですが、改善の余地があります（以下、長い答えです）。

---

回答：

いくつかの時間前、私はvery good initiation tutorial on building a GIS application with geodjango and google mapsをお読みください。それを読んで、それはあなたに大きな飛躍をもたらすはずです。

これを読んだ後は、フロントエンドで遊ぶ余地のあるやや異なる方法に従います（たとえば、反応するか、何を思い浮かべるか）。

バックエンド：

1. は、辞書のリストを返すvalues()クエリセットメソッドを使用して、JSONなどの必要な情報（user_name、location）を取得するためのビューを作成します。
   我々はリストをJSONifyする必要があるので、我々はJsonResponseを使用すると、我々は安全ではないとして、それをマークするには：

   from django.http import JsonResponse 
   
   def my_view(request): 
       resp = MyModel.objects.all().values('user_name', 'location') 
       return JsonResponse(list(resp), safe=False) 
   

2. urls.pyにそのビューにアクセスするためのエンドポイントを追加します。今すぐ

   urlpatterns = [ 
       ... 
       url(r'^my_endpoint/$', my_view, name='my_endpoint'), 
       ... 
   ] 
   

   たび我々 my_endpoint/にアクセスすると、データベースにはすべてのオブジェクトのuser_nameとlocationのJSON表現が表示されます。これは次のようになります。

   [ 
       {user_name: a_user, location: [lat, lng]}, 
       {user_name: another_user, location: [lat, lng]}, 
       ... 
   ] 
   

今のフロントエンドへの移行：

1. は、（APIへgetJSON()またはajax()またはコールの他のタイプを作成し、同じ時間にマーカーリストを作成近く@MoshFeuが示唆するものへ）：

   let map = new google.maps.Map(document.getElementById('map'), { 
       center: new google.maps.LatLng(49.279504, -123.1162), 
       zoom: 14, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
   }); 
   
   let markers = []; 
   
   $.getJSON("my_base_url/my_endpoint", function(data) { 
       $.each(data, function() { 
        markers.push(
         new google.maps.Marker({ 
          position: { 
           lat: data['location'][0], 
           lng: data['location'][1] 
          }, 
          map: map, 
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' 
         })  
        ); 
       }); 
   }); 
   ... 
   

そして、私たちは、AR eはかなり終わった！

データに特別なシリアライズを行う必要はありません。
あなたは設計自由を与えることができる想像できるあらゆるタイプのフロントエンドからデータをクエリできます。