谷歌地圖v3 API標記不起作用並留下空白頁

我正在嘗試製作帶有標記的自定義地圖。我已經有了一個自定義地圖，但是當我嘗試添加標記時，它會導致空白頁。谷歌地圖v3 API標記不起作用並留下空白頁

我不知道我做錯了什麼，因爲我做了我應該做的一切，除非我錯過了什麼。

我使用的是公共區域提供我正確的代碼自定義圖像：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" /> 
    <meta charset="utf-8" /> 
    <title>Nexoness Nation - Google Maps</title> 
    <link rel="shortcut icon" href="https://maps.gstatic.com/favicon3.ico"/> 
</head> 

<body onload="initialize()"> 
     <div id="map-canvas" style="width: 100%; height: 100%"></div> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
     var customMapTypeOptions = { 
      getTileUrl: function(coord, zoom) { 
        var normalizedCoord = getNormalizedCoord(coord, zoom); 
        if (!normalizedCoord) { 
         return null; 
        } 
        var bound = Math.pow(2, zoom); 
        /*Edit this URL to where you upload your tiles...*/ 
        return "http://nexonessnation.bugs3.com/tile_" + zoom + "_" + normalizedCoord.x + "-" + normalizedCoord.y + ".svg"; 

      }, 
      tileSize: new google.maps.Size(256, 256), 
      isPng: true, 
      maxZoom: 3, 
      minZoom: 0, 
      name: "Nexoness Nation" 
     }; 

     var customMapType = new google.maps.ImageMapType(customMapTypeOptions); 

      // Normalizes the coords that tiles repeat across the x axis (horizontally) 
       // like the standard Google map tiles. 
       function getNormalizedCoord(coord, zoom) { 
       var y = coord.y; 
       var x = coord.x; 

       // tile range in one direction range is dependent on zoom level 
       // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc 
       var tileRange = 8 << zoom; 

       // don't repeat across y-axis (vertically) 
       if (y < 0 || y >= tileRange) { 
        return null; 
       } 

       // repeat across x-axis 
       if (x < 0 || x >= tileRange) { 
        x = (x % tileRange + tileRange) % tileRange; 
       } 

       return { 
        x: x, 
        y: y 
       }; 
       } 

     function initialize() { 
      var myLatlng = new google.maps.LatLng(0, 0); 
      var myOptions = { 
       zoom: 1, 
       center: myLatlng, 
      mapTypeControlOptions: { 
        mapTypeIds: ["Nexoness Nation"] 
        } 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      map.mapTypes.set('Nexoness Nation', customMapType); 
      map.setMapTypeId('Nexoness Nation'); 
      } 

function addMarkers() { 
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    for (var i = 0; i < 10; i++) { 
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), 
             southWest.lng() + lngSpan * Math.random()); 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map_canvas 
    }); 
    } 
} 


</script> 

</body> 
</html>

有誰看到我在做什麼錯？

來源

2014-05-10 user3619741

請爲您的代碼創建一個小提琴。 –

不好意思，但你是什麼意思與小提琴？是不是一個樂器？ http://en.wikipedia.org/wiki/Fiddle – user3619741

不，請轉至此鏈接：http://jsfiddle.net並在其中放置相關代碼，以便人們輕鬆查看您的問題。 –

您的DIV在<div id="map-canvas" style="width: 100%; height: 100%"></div>（「地圖畫布」）不匹配，你在你的腳本註明ID的ID：在您所提供的的jsfiddle map = new google.maps.Map(document.getElementById("**map_canvas**"), myOptions);

此外，您還需要選擇no wrap - <in body>代替onLoad位於左側菜單的第二個下拉菜單中，因爲您正在調用身體onLoad中的initialize()函數。

更新：的確，我忘記了標記。首先，功能addMarkers()未從initialize()調用。另外，我們不要忘記發送「地圖」作爲參數，所以我們可以在addMarkers中使用它。

最後getBounds在事件bounds_changed被觸發後可用，我們只需要在它上面添加一個監聽器來獲取值。

這是一個可行的的jsfiddle： http://jsfiddle.net/M2RD6/4/

來源

2014-05-10 09:45:32 Slyvain

謝謝！代碼工作確實，但我沒有看到標記？ – user3619741

我剛更新了我的答案;） – Slyvain

的確的感謝！如果我想讓它像https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple那樣與座標我只需要更改函數並添加（地圖）？它們遍佈整個地方 – user3619741

谷歌地圖v3 API標記不起作用並留下空白頁

回答

相關問題