Question

我编写的代码在我的桌面浏览器上运行得非常好，但是当我使用GoDaddy的网站构建器自动创建移动网站时，地图永远不会出现。

它在任何桌面浏览器上看起来都很好，但它只是任何移动设备上的空白区域。

有什么建议吗？

以下是代码：

<!--This is the text that initializes the map-->

<!DOCTYPE html>
<html>
<head>
<style>
  #map-canvas {
    width: 100%;
    height: 600px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  var map;
 function initialize() {

// These lines show zoom level, and where the map
// is centered when the page first opens.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(45.0000, -98.0000),
// Chose "HYBRID", "ROADMAP", "SATELLITE", or "TERRAIN"
mapTypeId: google.maps.MapTypeId.ROADMAP,

};
var map = new google.maps.Map(document.getElementById('map-canvas'),     mapOptions);    




// Here we define all the latitudes and longitudes of 
// each city, plus update the link to send to the correct
// page destination. This is the only
// text that ever needs to be edited.

var locations = [

['<h4><a href="http:// http://www1.nyc.gov/" target="_self">New York  City</h4>', 40.7500, -74.0000],

['<h4><a href="http:// http://www.victoria.ca/" target="_self">Victoria</h4>', 48.5000, -123.3000],


];


// STOP EDITING!!
// Feel free to read stuff...but there's no need to
// edit anything from here down.

// Setup the icon
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'red-dot.png',

]
var iconsLength = icons.length;

var infowindow = new google.maps.InfoWindow({
  maxWidth: 1000
});

var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: icons[iconCounter]
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

  iconCounter++;

  // We only have two possible icon colors, so we 
  //restart the counter

  if(iconCounter >= iconsLength) {
    iconCounter = 0;
  }
}


// This text ends the code.

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

自定义Google地图无法在移动网站上运行

0 个答案: