问题描述
我编写了一个脚本，首先对地址进行地理编码，然后显示该地址的地图。
麻烦的是，它只适用于Chrome / Chromium。其他浏览器（Firefox 10和IE9）显示灰色框。一个可能相关的问题，如果我向地图添加标记，标记不会显示在Chrome中。
我知道这一点：
- 我使用API密钥成功连接API。
- 地址已经过正确的地理编码。
- 我使用jQuery UI对话框来显示地图。但是，这似乎不成问题。删除对话框并使用静态div创建相同的灰色框结果。
以下是我的脚本，我如何调用它，以及我正在使用的网站。
以下是脚本：
function Map（properties）
{
var that = this;
// HTML div
this.element = properties.element;
//地址字符串到地理编码
this.address = properties.address;
//在地图上和jQuery对话框中使用的标题
this.title = properties.title;
this.latlng = null;
this.map = null;
this.markers = [];
//地理编码地址和回调
新的google.maps.Geocoder（）。geocode（{'address'：this.address}，函数（数据）
{
// geocoded纬度/经度对象
that.latlng = data [0] .geometry.location;
//地图选项
var选项=
{
zoom：16，
center：that.latlng，
zoomControl：false，
streetViewControl：false，
mapTypeControl：false，
mapTypeId：google.maps.MapTypeId。 ROADMAP
;;
//创建地图
that.map = new google.maps.Map（that.element，options）;
//添加一个标记
that.markers.push（new google.maps.Marker（{map：that.map，
position：that.latlng，
title：that.title +\\\
+
that.address}））;
}）;
this.get_google_map = function（）
{
return that.map;
//创建一个带有映射的jQuery UI对话框
this.show_in_dialog = function（）
{
//因为对话框可以调整大小，我们需要通知地图关于这个
$（that.element）.dialog（{width：400，height：300，title：that.title，
resizeStop：function（event）
{
google.maps.event.trigger（that.map，'resize'）;
}，
open：function（event）
{
google.maps.event。触发器（that.map，'resize'）;
}}）;
}
this.center = function（）
{
that.map.setCenter（that.latlng）;
以下是我如何调用它：
//通过HTML5属性
获取地址var address = $（＃address）。attr（data-address） ;
// ...和标题
var title = $（＃address）。attr（data-title）+Map;
var map_element = document.createElement（'div'）;
//将新创建的元素附加到主体
$（body）。append（map_element）;
//创建我自己的地图对象
var map = new Map（{element：map_element，
address：address，
title：title}）;
//绑定链接以显示地图
$（＃map_link）。click（function（）
{
map.center（）;
map.show_in_dialog（）;
返回false;
}）;
以下是问题的网址（点击地图）：
b
$ b
最后但并非最不重要的是，我合并并混淆了我的JavaScript，因此您在上面看到的内容与网站上的源代码不完全一样。
哇...这是问题。
我建立的布局是流畅的布局。所以，我写的第一个CSS规则之一是：
img，div {max-width：100％; }
这样div和图像就可以缩放。那么，无论出于何种原因，谷歌地图不会像这条规则，最终的结果是一个灰色的框。
因此，我添加了另一个规则 - 谷歌地图的例外： img.no_fluid，div.no_fluid {max-width：none; }
然后，在javascript中：
// AFTER DIALOG CREATION
$（dialog）.find（'*'）。addClass（no_fluid）;
find（'*'）会给我们所有的后代。 b
Viola！
I wrote a script that first geocodes an address and then displays a map of that address.The trouble is, it only works in Chrome / Chromium. Other browsers (Firefox 10 & IE9) display a grey box. A problem that could be related, if I add a marker to the map, the marker does not show in Chrome.
I know that :
- I connect with the API successfully with my API key.
- The address is properly geocoded.
- I use jQuery UI dialog to display the map. This, however, does not seem to be a problem. Removing the dialog and using a static div creates the same "grey box" result.
Below is my script, how I invoke it, and the website that I am using this on.
Here's the script:
function Map(properties)
{
var that = this;
// the HTML div
this.element = properties.element;
// address string to geocode
this.address = properties.address;
// title to use on the map and on the jQuery dialog
this.title = properties.title;
this.latlng = null;
this.map = null;
this.markers = [];
// geocode address and callback
new google.maps.Geocoder().geocode({'address': this.address}, function(data)
{
// geocoded latitude / longitude object
that.latlng = data[0].geometry.location;
// map options
var options =
{
zoom: 16,
center: that.latlng,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create a map
that.map = new google.maps.Map(that.element, options);
// add a marker
that.markers.push(new google.maps.Marker({map: that.map,
position: that.latlng,
title: that.title + "\n" +
that.address}));
});
this.get_google_map = function()
{
return that.map;
}
// creates a jQuery UI dialog with a map
this.show_in_dialog = function()
{
// because the dialog can resize, we need to inform the map about this
$(that.element).dialog({ width: 400, height: 300, title: that.title,
resizeStop: function(event)
{
google.maps.event.trigger(that.map, 'resize');
},
open: function(event)
{
google.maps.event.trigger(that.map, 'resize');
}});
}
this.center = function()
{
that.map.setCenter(that.latlng);
}
}
Here's how I invoke it :
// grab the address via HTML5 attribute
var address = $("#address").attr("data-address");
// ... and the title
var title = $("#address").attr("data-title") + " Map";
var map_element = document.createElement('div');
// append the newly created element to the body
$("body").append(map_element);
// create my own map object
var map = new Map({ element : map_element,
address : address,
title : title });
// bind a link to show the map
$("#map_link").click(function()
{
map.center();
map.show_in_dialog();
return false;
});
And here's the URL of the problem (click on map):http://testing.fordservicecoupons.com/dealer/30000/premium_coupon_page
Last but not least, I combine and obfuscate my JavaScripts, so what you see above is not exactly the same as in the source on the website.
Wow... Here was the issue.
The layout that I built was a fluid layout. So, one of the first CSS rules that I have written was:
img, div { max-width: 100%; }
So that divs and images can scale. Well, for whatever reason, Google maps DOES NOT like this rule with the end result being a grey box.
And so I added another rule - an exception for Google maps:
img.no_fluid, div.no_fluid { max-width: none; }
And then, in javascript:
// AFTER DIALOG CREATION
$(dialog).find('*').addClass("no_fluid");
The find('*') will get us all the descendants.
Viola!
这篇关于Google Maps V3 JavaScript仅适用于Chrome吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！