mvcの剃刀のマーカーとGoogleマップを統合

私はプロジェクトをやっていると私はGoogleマップを統合する必要があります。私はGoogleマップを与えて、緯度と経度の2つのテキストボックスを与えました。現在、アプリケーションの実行時にGoogleマップとマーカーが表示されます。しかし、私の問題は、マーカーをクリックまたはドラッグすると、変更された緯度と経度がテキストボックスに表示されないということです。そして、マーカーが定義されていないJavaスクリプトエラーを表示します。mvcの剃刀のマーカーとGoogleマップを統合

ビュー

<div class="col-lg-7" id="dvMap" style="height:250px;"> </div> 

<div class="form-group"> 
     <div class="col-lg-9 col-md-8"> 
      @Html.EditorFor(model => model.Lat, new { htmlAttributes = new { @class = "form-control", @placeholder = "Latitude" } }) 
      @Html.ValidationMessageFor(model => model.Lat, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-lg-9 col-md-8"> 
      @Html.EditorFor(model => model.Long, new { htmlAttributes = new { @class = "form-control", @placeholder = "Longitude" } }) 
      @Html.ValidationMessageFor(model => model.Long, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

</div> 


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script> 

<script type="text/javascript"> 
     window.onload = function() { 
    //map.. 
    var map = new google.maps.Map(document.getElementById('dvMap'), { 
     center: { 
      lat: 10.9968683, 
      lng: 76.00882 
     }, 
     zoom: 15 
    }); 
    //marker.. 
    var marker = new google.maps.Marker({ 
     position: { 
      lat: 10.9968683, 
      lng: 76.00882 
     }, 
     map: map, 
     draggable: true 
    }); 
} 
//dragend event of marker 
google.maps.event.addListener(marker,'dragend', function() { 
    var Lats = marker.getPosition().lat(); 
    var Longs = marker.getPosition().lng(); 

    $('#Lat').val(Lats); 
    $('#Long').val(Longs); 
});

どのように私は問題を解決できますか？誰でも解決策を見つけるのを助けてくれますか？

出典

2017-09-29 user355

私は、あなたが行うことができますいくつかセットアップを再作成し、ここにいる：GoogleマップのJavaScript APIを呼び出すときに、コールバックのparamを追加

を。そして、あなたのAPIキーをここに公開するのではなく、誰かがそれを悪用する可能性のある公開エリアを投稿しないでください。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"

変更という名前のコールバック関数initMapにwindow.onloadともそこにあなたのリスナーが含まれます。これは、GoogleマップのJavascript APIを取得するときに、Mapsオブジェクトが未定義にならないようにした直後にinitMap()を呼び出すようにするためです。あなたはそれが一人で作業見ることができるようにここで

function initMap() { 
//map.. 
var map = new google.maps.Map(document.getElementById('dvMap'), { 
    center: { 
     lat: 10.9968683, 
     lng: 76.00882 
    }, 
    zoom: 15 
}); 
//marker.. 
var marker = new google.maps.Marker({ 
    position: { 
     lat: 10.9968683, 
     lng: 76.00882 
    }, 
    map: map, 
    draggable: true 
}); 

//dragend event of marker 
google.maps.event.addListener(marker,'dragend', function() { 
    var Lats = marker.getPosition().lat(); 
    var Longs = marker.getPosition().lng(); 
    $('#Lat').val(Lats); 
    $('#Long').val(Longs); 
}); 
}

は、カミソリの構文を使用せずに作業サンプルです：ここで

 /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
    <div id="dvMap" style="height:250px;"></div> 
 
\t \t <input type="text" id="Lat"> 
 
\t \t <input type="text" id="Long"> 
 
\t \t <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAZVylT7o5OxdosVfh-IVONHoaA0cpN5VI&callback=initMap" async defer></script> 
 
<script type="text/javascript"> 
 
    function initMap() { 
 
    //map.. 
 
    var map = new google.maps.Map(document.getElementById('dvMap'), { 
 
     center: { 
 
      lat: 10.9968683, 
 
      lng: 76.00882 
 
     }, 
 
     zoom: 15 
 
    }); 
 
    //marker.. 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
      lat: 10.9968683, 
 
      lng: 76.00882 
 
     }, 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
\t \t 
 
\t \t \t //dragend event of marker 
 
google.maps.event.addListener(marker,'dragend', function() { 
 
    var Lats = marker.getPosition().lat(); 
 
    var Longs = marker.getPosition().lng(); 
 

 
    $('#Lat').val(Lats); 
 
    $('#Long').val(Longs); 
 

 
}); 
 
} 
 
\t \t </script> 
 
    </body> 
 
</html>

が、それは無視 .NETFiddleに働くかもしれない方法を示す外部リンクですコントローラとモデル。

希望すると便利です。

出典

2017-10-02 09:26:34 henrisycip

上記の「Simple Map」スニペットでAPIキーを引用したAPIキーの乱用に関する恐ろしい警告の後、 :) – oflahero

これは、stackoverflowとfiddleサイトのための制限付きAPIキーです。それは他のものと一緒に使うことはできません:) – henrisycip

mvcの剃刀のマーカーとGoogleマップを統合

答えて

関連する問題