Google map does not display

Question

I'm trying to use a google map with d3, however, although console logs appear to indicate that everything is correct, the actual map does not display (also the markers). I have even tried to remove the marker overlay but the map does not display either.

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

I've created a jsfiddle at http://jsfiddle.net/PatriciaW/seut5/

Is there something obvious I have overlooked (I presume so.)

I get an error on that fiddle `google is not defined`, you haven't included any of the external scripts. [update fiddle with Google Maps Javascript API v3 script](http://jsfiddle.net/seut5/1/) and height/width for html/body (suspect that is your problem); still needs the d3.js script. — geocodezip, Feb 26 '14 at 22:49
I'm not very sure how to use jsfiddle. I was asked once to use it to load a large source file but other than that nothing. I guess I am going to have to figure out how to use it. — PatriciaW, Feb 27 '14 at 15:36

score 0 · Accepted Answer · answered Feb 26 '14 at 22:57

0

I updated geocodezips jsfiddle, you didnt include d3js or google maps api, you also didnt include a tag for the map to go into.

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

here is the link

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

answered Feb 26 '14 at 22:57

Zach Spencer

1,859
15
21

As that fiddle works fine, implies that the problem was the missing height/width percentage sizing for html/body. Makes this a duplicate of [Google Maps API v3 | shows no map data](http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data) or [Google Maps div not showing up in JSBin](http://stackoverflow.com/questions/20572196/google-maps-div-not-showing-up-in-jsbin/20572728#20572728) – geocodezip Feb 26 '14 at 23:37
Many thanks. Changing the height and width to px instead of % was all I needed. I did not see that. – PatriciaW Feb 27 '14 at 15:53

Google map does not display

1 Answers1