[英]Google map not loading in ajax
I'm trying to put together a Rails app that has a bit of ajax. 我正在尝试将一个具有一些ajax的Rails应用程序组合在一起。 The problem is that the ajax parts, which call a page to load, aren't showing the Google maps.
问题在于调用页面要加载的ajax部分没有显示Google地图。 Everything else is there on the page, but not the Google maps.
页面上没有其他内容,但Google地图没有。
When I click refresh, the page with the maps loads as it should do, but from then on, when I click on a link, the maps are missing - even though everything else in the page is there. 当我单击刷新时,包含地图的页面将按预期加载,但是从那时起,当我单击链接时,地图将丢失-即使页面中的所有其他内容都在那里。
The script that contains my map does not even load. 包含我的地图的脚本甚至都不会加载。 I mean when I put console.log("hello") between by script tags, 'hello' doesn't appear in my console.
我的意思是,当我在console.log(“ hello”)之间放置脚本标记时,'hello'不会出现在控制台中。 It does appear when I refresh the page, but not when using the ajax links.
当我刷新页面时,它确实出现了,但是在使用ajax链接时却没有。
Does anyone know why, or have some code to help me out? 有谁知道为什么,或者有一些代码可以帮助我? I tried:
我试过了:
$(document).ready(function(){
google.maps.event.trigger(map, 'resize');
});
at the top of my show.html.erb, but couldn't get it working. 在我的show.html.erb顶部,但无法正常运行。 If it's any help, the code for my map script is:
如果有帮助,我的地图脚本代码为:
<div id="map_canvas">
<script type="text/javascript">
console.log("hello")
var map;
var markers = [];
function initialize_google_maps() {
var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>);
var zoom = <%= @kms_range %> > 9 ? 9 : 10;
var myOptions = {
zoom: zoom,
center: currentlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}});
map.setCenter(currentlatlng);
map.setZoom(zoom);
var circle = new google.maps.Circle({
map: map,
fillOpacity: 0,
strokeWeight: 2,
strokeOpacity: 0.7,
radius: <%= @kms_range %>*1000,
});
circle.bindTo('center', marker, 'position');
}
function show_markers() {
if (markers)
for(i in markers) {
markers[i].setMap(map);
}
}
function add_marker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
// markers.setVisible(false);
}
function initialize_markers() {
<% (@reviews || []).each do |r| %>
<% next unless r.lat && r.lng %>
position = new google.maps.LatLng(<%= r.lat %>, <%= r.lng %>);
add_marker(position);
<% end %>
}
$(function() {
initialize_google_maps();
initialize_markers();
show_markers();
});
</script>
</div>
My Ajax Code is: 我的Ajax代码是:
$(document).on("ready", function(){
var ajax_loaded = (function(response) {
$(".page-content")
.html($(response).filter(".page-content"));
$(".page-content .ajax").on("click",ajax_load);
});
var form_submit = (function(e) {
e.preventDefault();
var url = $(this).attr("action");
var method = $(this).attr("method");
var data = {}
$(this).find("input, textarea, select").each(function(i){
var name = $(this).attr("name");
var value = $(this).val();
data[name] =value;
});
$.ajax({
"url": url,
"type": method,
"data": data,
"success": ajax_loaded,
"error": function () {alert("bad");}
});
});
var history = [];
var current_url_method;
var ajax_load = (function(e) {
e.preventDefault();
history.push(this);
var url =$(this).attr("href");
var method = $(this).attr("data-method");
if (current_url_method != url + method) {
current_url_method = url + method;
$.ajax({
"url": url,
"type": method,
"success": ajax_loaded,
});
}
});
$("#menu a").on("click",ajax_load);
$("#menu a.main").trigger("click");
$(".search-box form").on("submit", form_submit);
});
Did you solve the problem? 您解决问题了吗? I have the same problem(map not show by ajax load page) before but my problem is because I not give correct lat and lng
我之前有同样的问题(ajax加载页面未显示地图),但是我的问题是因为我没有给出正确的经纬度
maybe you would make sure value are right on your code 也许您可以确保代码正确无误
var myOptions = {
zoom: zoom,<br>
center: currentlatlng,<br>
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID<br>
streetViewControl: false<br>
};
and 和
set up your div width and height like <div id="map_canvas" style="width:800px" height:450px"></div>
设置div的宽度和高度,例如
<div id="map_canvas" style="width:800px" height:450px"></div>
I remember google map need width and height 我记得谷歌地图需要宽度和高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.