1
我有一個動態生成的谷歌地圖在此地圖加載：http://www.socialinvestmentscotland.com/looking-for-investment/case-studies/谷歌地圖API 3 - 在Firefox（V11）/ IE（V9），但Chrome瀏覽器（V17）
這裏的生成地圖Javascript（有兩個在頁頭其他陣列 - simple_markers_descriptions[]和simple_markers_addresses[] - 這是太大，在這裏重現）：
var addresses = ["57.1443510,-2.1076268","56.1372861,-3.3121857","55.9645964,-3.1738792","55.8651100,-4.1025119","56.4561225,-2.9863503","56.2444546,-4.2167933","56.9607619,-2.2021569","55.8477464,-4.2950799","58.1476532,-5.2027190","55.9720150,-3.2304094"];
var descriptions = ["<div><span>Udny</span><img src='/files/cache/a693e687b706d5acd6b46c25ecc7661f.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Udny Community Wind Turbine Co (UCWTC) is a community wind...<a href='/looking-for-investment/case-studies/udny'>Read more ></a></p>","<div><span>Recycle Fife</span><img src='/files/cache/356787e114efcc96697049971afad75a.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Recycle Fife is a project based in Lochgelly providing recycling...<a href='/looking-for-investment/case-studies/recycle-fife'>Read more ></a></p>","<div><span>Out of the Blue Arts & Education Trust</span><img src='/files/cache/ef910f196cd28ccc721c6cf6f4fb0cf3.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Out of the Blue (OOTB) is an Edinburgh based Arts...<a href='/looking-for-investment/case-studies/out-of-the-blue-arts-and-education-trust'>Read more ></a></p>","<div><span>FARE</span><img src='/files/cache/24072ab36e531e01b8572c9b787b474b.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Family Action in Rogerfield and Easterhouse (FARE) is a grassroots...<a href='/looking-for-investment/case-studies/fare'>Read more ></a></p>","<div><span>Factory Skate Park</span><img src='/files/cache/6e18539e7aed388b83c4bc9195ab3ed4.JPG' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Factory Skate Park is an innovative project based in Dundee...<a href='/looking-for-investment/case-studies/factory-skate-park'>Read more ></a></p>","<div><span>Callander Youth Project</span><img src='/files/cache/d131cb56df57c42bc9916467a3786892.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Callander Youth Project (CYP) was established in 1997 and delivers...<a href='/looking-for-investment/case-studies/callander-youth-project'>Read more ></a></p>","<div><span>Maritime Rescue Institute</span><img src='/files/cache/1f6c88cad135cac16d751bd443dd5975.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Maritime Rescue Institute (MRI) is a Scottish Charity based in...<a href='/looking-for-investment/case-studies/maritime-rescue-institute'>Read more ></a></p>","<div><span>Glasgow City Mission</span><img src='/files/cache/8a7653db916025c4aceb94b467b3bfa6.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>Glasgow City Mission (GCM) is the world's first City...<a href='/looking-for-investment/case-studies/glasgow-city-mission'>Read more ></a></p>","<div><span>Assynt Foundation</span><img src='/files/cache/0f33797845f6cf308fa43a9a5eca13eb.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>The Assynt Foundation was formed in 2004 in order to...<a href='/looking-for-investment/case-studies/assynt-foundation'>Read more ></a></p>","<div><span>Spartans Community Football Academy</span><img src='/files/cache/5f62cdb1362b4f52d5101fac7859e6d5.jpg' width='60' height='75' alt='Case study icon' class='infowindow_thumb'/><p>The Spartans Community Football Academy (Spartans) is the home of...<a href='/looking-for-investment/case-studies/spartans-community-football-academy'>Read more ></a></p>"];
// Combine case study markers and simple markers
if (simple_markers_addresses.length > 0) {
var numCaseStudies = addresses.length;
addresses = addresses.concat(simple_markers_addresses);
descriptions = descriptions.concat(simple_markers_descriptions);
}
// Global map vars
var infobox = new InfoBox({
boxStyle: {
background: "url('/themes/sis/img/map/map_sprites.png') no-repeat -116px -8px",
width: "228px",
height: "140px"
},
closeBoxURL: "/themes/sis/img/map/map_close.gif",
closeBoxMargin: "10px 13px 0 0",
infoBoxClearance: new google.maps.Size(1,1),
pixelOffset: new google.maps.Size(-112, -14),
alignBottom: true
});
var infoboxSmall = new InfoBox({
boxStyle: {
background: "url('/themes/sis/img/map/map_sprites.png') no-repeat -357px -8px",
width: "228px",
height: "110px"
},
closeBoxURL: "/themes/sis/img/map/map_close.gif",
closeBoxMargin: "10px 13px 0 0",
infoBoxClearance: new google.maps.Size(1,1),
pixelOffset: new google.maps.Size(-115, 1),
alignBottom: true
});
var marker;
var lastClickedMarker;
var bounds = new google.maps.LatLngBounds();
var markersArray = new Array();
var iconType;
var center = new google.maps.LatLng();
var startCenter = new google.maps.LatLng(56.816922, -4.18265);
var startBounds = new google.maps.LatLngBounds();
var bigMarker = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
new google.maps.Size(20, 24),
new google.maps.Point(46, 8),
new google.maps.Point(5, 22)
);
var bigMarkerHover = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
new google.maps.Size(20, 24),
new google.maps.Point(75, 8),
new google.maps.Point(5, 22)
);
var smallMarker = new google.maps.MarkerImage('/themes/sis/img/map/map_sprites.png',
new google.maps.Size(15, 15),
new google.maps.Point(8, 8),
new google.maps.Point(4, 4)
);
// Initialise map
function initialise() {
// Map options
var mapOptions = {
disableDefaultUI : true,
zoomControlOptions : { style: google.maps.ZoomControlStyle.SMALL },
disableDoubleClickZoom : true,
backgroundColor : "#E7E7E7",
mapTypeId : google.maps.MapTypeId.TERRAIN,
minZoom : 6,
maxZoom : 14,
center : startCenter
};
// Map object
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Loop through geocoded data
for(var i = 0; i < addresses.length; i++) {
createMarker(addresses[i], descriptions[i], i);
}
function createMarker(address, desc, i) {
if (i >= numCaseStudies) {
iconType = smallMarker;
} else {
iconType = bigMarker;
}
var latlongAddress = address;
latlongAddress = latlongAddress.substring(1);
latlongAddress = latlongAddress.substring((latlongAddress.length-1));
var latlongArray = address.split(',')
var pos = new google.maps.LatLng(latlongArray[0],latlongArray[1]);
marker = new google.maps.Marker({
position : pos,
map : map,
icon : iconType,
flat : true
});
// Add new marker to markersArray
markersArray[i] = marker;
// Recalculate extent of map
bounds.extend(marker.position);
setBounds();
if (i >= numCaseStudies) {
attachListener(marker,desc,1);
} else {
attachListener(marker,desc,0);
}
}
// Set extent of map
function setBounds() {
map.setZoom(6);
center = map.getCenter();
startBounds = map.getBounds();
}
// Attach infowindow with listener event
function attachListener(marker,desc,simple) {
if (simple == 0) {
// Event on hovering marker
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
marker.setZIndex(999);
marker.setIcon(bigMarkerHover);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
marker.setZIndex(undefined);
marker.setIcon(bigMarker);
}
})(marker, i));
}
// Event on clicking markers
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infobox.close();
infoboxSmall.close();
if (simple == 1) {
infoboxSmall.setContent(desc);
infoboxSmall.open(map, marker);
resetRollovers(lastClickedMarker);
} else {
infobox.setContent(desc);
infobox.open(map, marker);
marker.setZIndex(999);
marker.setIcon(bigMarkerHover);
google.maps.event.clearListeners(marker, 'mouseout');
google.maps.event.addListener(infobox, 'closeclick', function() {
resetRollovers(lastClickedMarker);
});
google.maps.event.addListener(infobox, 'content_changed', function() {
resetRollovers(lastClickedMarker);
});
}
lastClickedMarker = marker;
}
})(marker, i));
// Handles rollover/active states between small and big markers
function resetRollovers(lastClickedMarker) {
var pos = 10000;
for(i=0; i < markersArray.length; i++) {
if (markersArray[i] === lastClickedMarker) {
pos = i;
break;
}
}
if (pos < numCaseStudies) {
lastClickedMarker.setIcon(bigMarker);
google.maps.event.addListener(lastClickedMarker, 'mouseout', (function(lastClickedMarker, i) {
return function() {
lastClickedMarker.setZIndex(undefined);
lastClickedMarker.setIcon(bigMarker);
}
})(lastClickedMarker, i));
}
}
}
/*google.maps.event.addListenerOnce(map, 'idle', function(){
$('.case-study-list').css('visibility','visible');
});*/
}
window.onload = initialise;
它的正常工作在Firefox 11和IE 9，而Chrome只顯示了一個灰色的框。控制檯中沒有錯誤，並且頁面驗證成功。
我不知道問題出在哪裏 - 開發網頁我發現Google Maps API對Javascript非常貼心，但由於它在其他瀏覽器中工作，所以我很擔心周圍的東西太多了。
它也適用於我的鉻合金 – 2012-03-28 14:16:31
嗯我已經在Win 7（兩臺機器，包括一臺全新的Chrome瀏覽器）上試過Chrome 17，但它也沒有工作。你使用的是什麼設置？ – melat0nin 2012-03-28 14:22:21
WinXP上的Chrome 17 – 2012-03-28 14:36:21