谷歌地图不显示

我试图使用谷歌地图与D3，但是，虽然控制台日志似乎表明，一切都是正确的，实际的地图不显示（也标记）。我甚至试图删除标记覆盖，但地图不显示。谷歌地图不显示

var cx; var cy; 
var width = 1000; 
var height = 800; 

// Create the Google Map… 
var map = new google.maps.Map(d3.select("#map") .node(), { 
zoom: 111, // was 11 
center: new google.maps.LatLng(43.7, -79.4), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
); // end new map 

var circles; 
var imageAttributes = {height:32, width:32, x:-16, y:-16}; 

d3.json("/mydrupal/sites/default/d3_files/json/members google.json?nocache=" + (new Date()).getTime(),function(error,data) 
{ 
var overlay = new google.maps.OverlayView(); 
// Add the container when the overlay is added to the map. 
overlay.onAdd = function() { 
var layer = d3.select(this.getPanes() 
    .overlayLayer) 
    .append("div") 
    .attr("class", "members"); // end var layer 
// Draw each marker as a separate SVG element. 
// We could use a single SVG, but what size would it have? 
overlay.draw = function() { 
    var projection = this.getProjection(), 
     padding = 10; // end var projection 
    var marker = layer.selectAll("svg") 
     .data(d3.entries(data)) 
     .each(transform) // update existing markers 
    .enter() 
     .append("svg:svg") 
     .each(transform) 
     .attr("class", "marker"); // end var marker 
    // Add a circle. 
    marker.append("svg:circle") 
     .attr("r", 4.5) 
     .attr("cx", padding) 
     .attr("cy", padding); // end marker append circle 
    // Add a label. 
    marker.append("svg:text") 
     .attr("x", padding + 7) 
     .attr("y", padding) 
     .attr("dy", ".31em") 
     .text(function(d) { 
      return d.key; 
      }); // end text and marker append 

    function transform(d) { 
    d = new google.maps.LatLng(d.value[0], d.value[1]); 
    d = projection.fromLatLngToDivPixel(d); 
    return d3.select(this) 
     .style("left", (d.x - padding) + "px") 
     .style("top", (d.y - padding) + "px"); 
    } // end transform 
}; // end overlay draw 
}; // end overlay add function 

// Bind our overlay to the map… 
overlay.setMap(map); 
}); // end members json

我在http://jsfiddle.net/PatriciaW/seut5/

创建的jsfiddle有什么明显的我都忽略了（我相信如此。）

来源

2014-02-26 PatriciaW

我得到对小提琴的错误'谷歌是不是defined'，您还没有任何外部脚本。 [用Google Maps JavaScript API v3脚本更新小提琴]（http://jsfiddle.net/seut5/1/）和HTML/body的高度/宽度（怀疑是你的问题）;仍然需要d3.js脚本。 – geocodezip

我不太清楚如何使用jsfiddle。我被问到曾经用它来加载一个大的源文件，但除此之外什么都没有。我想我将不得不弄清楚如何使用它。 – PatriciaW

我更新geocodezips的jsfiddle，你没有包括d3js或谷歌地图API，你也没有包含地图的标签。

<div id="map"></div>

这里是链接

http://jsfiddle.net/seut5/2/

来源

2014-02-26 22:57:26

由于该小提琴工作正常，意味着问题是缺少html/body的高度/宽度百分比大小。使其成为[Google Maps API v3 |的复本显示没有地图数据]（http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data）或[Google Maps div未显示在JSBin中]（http：// stackoverflow.com/questions/20572196/google-maps-div-not-showing-up-in-jsbin/20572728#20572728） – geocodezip

非常感谢。改变高度和宽度为px而不是％是我所需要的。我没有看到。 – PatriciaW

谷歌地图不显示

回答

相关问题