javascript - Library Places を使用した Google Maps API v3 AJAX LOAD

Question

モーダルポップアップウィンドウで、Google マップ (API バージョン 3 を使用しています) を読み込む必要があるプロジェクトに取り組んでいます。

モーダルのコンテンツは ajax 呼び出しを使用して読み込まれます。取得したいのは、Google マップ API を動的に読み込むことです。

次のコードを使用すると、探していた正確な結果を得ることができますが、明らかに、解決方法を理解できないという副作用もあります (プロセス全体で何か間違ったことをしている可能性があり、解決できないだけです)。何を理解するために）。すべての助けに本当に感謝します。私の心を明確にしてくれる人に前もって感謝します。

注(1): 2 つの異なるバージョンのコードを使用しました (1 つは url パラメーターを使用して API をロードし、もう 1 つは Google ロード機能を使用して)、結果は同じです。

注(2): 完全な開発は Ruby on Rails 3 を使用して行われ、アセットパイプライン機能を最大限に活用しようとしています。

コード（説明）

(1) JQUERY FUNCTION - 外部スクリプトを動的にロードするために使用

jQuery.externalScript = function(url, options) {
  // allow user to set any option except for dataType, cache, and url
  options = $.extend(options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax(options);
};

(2) JS FUNCTION - これにより、Google ロード API が動的に呼び出されます。

function google_load_api_call() {
  var gmap_src = 'https://www.google.com/jsapi';
  $.externalScript(gmap_src).done(function() {
        load_google_maps_api_via_google_ajax_api_loader();
  });;
}

(3) JS FUNCTION - Google ロードを使用して、Google マップ API を動的に呼び出します。

function load_google_maps_api_via_google_ajax_api_loader() {
  google.load("maps", "3", {other_params:'libraries=places&sensor=false', callback: function(){
    initialize(); // initialize your map in here
  }});
}

(3) JS FUNCTION - Google マップを初期化します (コールバックとして使用)

function initialize() {
  var mapOptions = {
    zoom: 0,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

(4) RAILS JS.ERB - これは、モーダルをロードし、すべてのコンテンツ (マップなど) をロードするために使用されます。

$('#section').append('<%= escape_javascript(render(:partial=>'locations/new_page/locations_new')) %>');

$(function() {
   modal_create_new_location(); // This call the modal to show
   google_load_api_call(); // This load the google load api and the map
   create_new_location_data_submit(); // This submit in ajax the form data
});

コード (結果と問題)

コードはそのタスクを完全に実行し、モーダルロード、マップロード、ライブラリプレースロード、および動作します。すべてが完全に正しいようです（クロム、またはサファリでは問題ありません）。

私の巨大な苦痛と苦痛を生み出すのは、firefoxによって提起された問題（実際には警告）です.GoogleマップAPI呼び出しにライブラリ（場所やジオメトリなど）も含めた場合のみです-JS関数NUMBER（3）を参照してください。 [other_params:'libraries=places] がある行。ライブラリをロードしないと、Firefox も文句を言わなくなり、すべてが完全に機能します。

Firefox によって発生する WARNING は次のとおりです。

エラー: eval(code, scopeObject) のサポートは削除されました。| with (scopeObject) eval(code);| を使用します。代わりは。

そしてそれは参照されます：

https://maps.gstatic.com/cat_js/intl/en_US/mapfiles/api-3/10/19/ {main,places}.js

9行目で

誰かが私がここで間違っていることを理解してもらえますか? 動的呼び出しを使用してライブラリを呼び出すべきではありませんか? オートコンプリートマップ機能を使用するにはどうすればよいですか?

javascript - Library Places を使用した Google Maps API v3 AJAX LOAD

0 に答える 0

Related

Reference