Googleマップのアドレス一覧Javascript

Question

私はオブジェクトとしてビューに渡しているクライアントの名前、緯度、経度を含むリストを持っています。

私は、クライアントラットロングを使用してマーカーでGoogleマップを生成するためのJavaScriptコードを用意しています。

私は開発者ではありませんが、これが最善の方法であるかどうかはわかりませんが、私の質問は次のとおりです。マーカーをロードするにはどうすればこのリストをjavascript内で取得できますか？

コントローラー：

public ActionResult Index() 
    { 
     List<object> ec = new List<object>(); 
     ec.Add(db.Estoques.ToList()); 
     ec.Add(db.Clientes.ToList()); 
     return View(ec); 
    } 

ビュー：

@model IEnumerable<object> 

@{ 
    List<selectgas.ADOs.ADOClientes> ListaClientes = Model.ToList()[1] as List<selectgas.ADOs.ADOClientes>; 
} 

<div id="map_wrapper"> 
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxevnGqIeXmmR_rZx6-aLMHFS6gZ2O3qs&callback=initialize"> 
    </script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      // execute 
      (function() { 
       // map options 
       var options = { 
        zoom: 5, 
        center: new google.maps.LatLng(39.909736, -98.522109), // centered US 
        mapTypeId: google.maps.MapTypeId.TERRAIN, 
        mapTypeControl: false 
       }; 

       // init map 
       var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

       // NY and CA sample Lat/Lng 
       var southWest = new google.maps.LatLng(40.744656, -74.005966); 
       var northEast = new google.maps.LatLng(34.052234, -118.243685); 
       var lngSpan = northEast.lng() - southWest.lng(); 
       var latSpan = northEast.lat() - southWest.lat(); 

       // set multiple marker 
       for (var i = 0; i < ListaClientes.lenght; i++) { 
        // init markers 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(ListaClientes[i].Lat, ListaClientes[i].Long), 
         map: map, 
         title: 'Click Me ' + i 
        }); 

        // process multiple info windows 
        (function(marker, i) { 
         // add click event 
         google.maps.event.addListener(marker, 'click', function() { 
          infowindow = new google.maps.InfoWindow({ 
           content: 'Hello, World!!' 
          }); 
          infowindow.open(map, marker); 
         }); 
        })(marker, i); 
       } 
      })(); 
     }); 


    </script> 
    <div id="map_canvas" class="mapping"></div> 
</div> 

Answer 1

のコントローラは、次のコレクションを返すと仮定しましょう：

public ActionResult Index() 
{ 
    var cities = new List<City>(); 
    cities.Add(new City() { Title = "Paris", Lat = 48.855901, Lng = 2.349272}); 
    cities.Add(new City() { Title = "Berlin", Lat = 52.520413, Lng = 13.402794 }); 
    cities.Add(new City() { Title = "Rome", Lat = 41.907074, Lng = 12.498474 }); 
    return View(cities); 
} 

public class City 
{ 
    public string Title { get; set; } 

    public double Lat { get; set; } 

    public double Lng { get; set; } 
} 

は、JavaScriptの配列は次のように初期化することができます。

var cities = @Html.Raw(Json.Encode(Model)); 

Demo