Question

我正在开发一个项目，需要在模态弹出窗口中加载谷歌地图（我正在使用api版本3）。

使用ajax调用加载模态的内容，我想要获得的是以动态方式加载google map api。

以下代码让我获得了我正在寻找的确切结果，但显然它也有副作用，我无法弄清楚如何解决（也许我在整个过程中做错了，我只是不知道是什么）。每一个帮助都会非常感激，我提前感谢谁能够澄清我的想法。

注意（1）：我使用了2个不同版本的代码（一个使用url参数加载api，另一个使用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功能 - 这可以动态调用google load 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功能 - 这使用谷歌加载动态调用谷歌地图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 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
});

代码（结果和问题）

代码完美地执行其任务，模态加载，地图加载，库加载和工作。一切似乎都是完全正确的（在chrome或safari中，没有问题）。

什么造成我巨大的痛苦和痛苦是firefox引发的一个问题（实际上是一个警告），只有当我在谷歌地图api调用中包含一个库（例如地方或geormetry）时 - 请参阅JS函数NUMBER（ 3），其中有[other_params：'libraries = places]的行。如果我不加载库，firefox也不会再抱怨了，一切都运行得很好。

Firefox引发的警告如下：

错误：已删除对eval（code，scopeObject）的支持。使用| with（scopeObject）eval（code）; |代替。

并且它被称为：

https://maps.gstatic.com/cat_js/intl/en_US/mapfiles/api-3/10/19/ {主，地点}的.js

第9行

有人可以让我了解我在这里做错了什么吗？我不应该使用动态调用来调用库？那我怎么可以使用自动完成地图功能呢？

Google Maps API v3 AJAX LOAD with Library Places

0 个答案: