title: Add topojson on top of google map
body: <p>I am following this example (<a href="http://bl.ocks.org/zross/10654766" rel="nofollow noreferrer">http://bl.ocks.org/zross/10654766</a>) and trying to replace the data which is counties in California to counties in the whole US.  The data I used to replace the one in example is <a href="https://d3js.org/us-10m.v1.json" rel="nofollow noreferrer">https://d3js.org/us-10m.v1.json</a>. I saved it as uscounty.json.</p>
  
  <p>My problem is topojson file can not align properly with googlemap at a right position in spite of the features do show up. I guess it has something to do with the projection but I can't figure out how to define a correct projection for the data I am trying to replace. </p>
  
  <p>Any comments will be appreciated. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;HTML5&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=650, user-scalable=yes"&gt;
  
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
    &lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;
  
    &lt;style&gt;
  
      html, body {
        height: 100%;
        margin: 0;
      }
  
      #mapcanvas{
  
        height:100%;
      }
  
    &lt;/style&gt;
  
    &lt;script&gt;
  
  
     var geoJsonObject;
     var thejson;
  
     $(document).ready(function(){
  
  
  
    var mapOptions = {
      zoom: 5,
      center: new google.maps.LatLng(38.284335, -120.833818),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
  
    map=new google.maps.Map($('#mapcanvas')[0], mapOptions);
  
  //county.json is a topojson file
  
    $.getJSON("uscounty.json", function(data){
          geoJsonObject = topojson.feature(data, data.objects.counties)
          map.data.addGeoJson(geoJsonObject); 
        }); 
  
  
  
    });//end document ready
  
  
   &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="mapcanvas"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>