2011-09-13 16 views
2

私は自分のasp.net mvc 3ウェブサイトにgooglemapsを統合しようとしていますか?asp.net mvc 3のgooglemaps

asp.net webformsのリンクが見つかりましたが、asp.net mvc 3のリンクが見つかりませんでしたか? 誰かが私にリンクまたはコードサンプルを送信できますか?

答えて

3

(私はあなたが既にjQueryのを追加しました仮定)あなたのページの先頭にこのJavaScriptを追加します。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

その後、これはあなたのビューの本体にDIV:

<div id="map_canvas" style="width:200px; height:200px; "></div> 

次に、このスクリプトを追加マップを制御するブロック

<script type="text/javascript"> 
function initialize() { 
    var latLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude); 
    var myOptions = {zoom: 7, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 
$(document).ready(function() {initialize();}); 
</script> 

緯度と経度はモデルから来ており、 javascriptにsを出してください。

+0

IEnumerableを @modelどのようにこの作品がする私はちょうど入力streetname、郊外や国にしたい場合は? – user603007

+0

ジオコーディングAPIを使用するhttp://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding –

0

Googleマップはすべて、アプリケーションのサーバー側ではなく、javascriptに関するものです。あなたは単純にASP.NETバージョンのコードを使用することができます - 主なポイントは、Googleマップ用のjsファイルを作成する方法です。

1

モデルからデータを渡していますか? SQLデータベースからデータを渡す場合はどうすればよいですか?私は何をすべきか?私はいつもコンパイルエラーが出ます。 "CS1061: 'System.Collections.Generic.IEnumerable'に 'longitude'の定義が含まれておらず、拡張メソッドがありません 'longitude'は 'System.Collections.Generic.IEnumerable'タイプの最初の引数を受け入れることができますusingディレクティブまたはアセンブリ参照がありませんか?) "

ここは私のコードです。

@{ 
     ViewBag.Title = "MVC 3 and Google Maps"; 
    } 

    @section Scripts { 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    } 

    @section Styles { 
     html { height: 80% } 
     body { height: 80%; margin: 0px; padding: 0px } 
     #map_canvas { height: 80% } 
    } 

    <h2>Hello, Google Maps</h2> 

    <div id="map_canvas" style="width:80%; height:80%"></div> 

    <script type="text/javascript"> 

     function initialize() { 
      var latlng = new google.maps.LatLng(@Model.longitude, @Model.latitude); 
      var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 
      //google.maps.event.trigger(map, 'resize'); 
     } 

     $(function() { 
      initialize(); 
     }); 

    </script>