title: Using Google Maps with Natural Earth Data Set in Fusion Tables
body: <p>I am trying to create a plugin for wordpress that simply takes an array of Country Names entered in post or page creation (Much like tags), and generates a map using the Google Maps APIv3 with all of the countries highlighted (using polygon data from the natural earth data set), but I am coming up extremely short in the area of finding resources regarding how to merge these two technologies together.</p>
  
  <p>I am pretty familiar with the Google Maps API and how to manipulate it within wordpress using PHP and variables provided the post object, but I can't seem to figure out how to merge it with the data provided in the natural earth data set.</p>
  
  <p>I have stumbled on these, but still can't figure it out.</p>
  
  <p><a href="https://stackoverflow.com/questions/10888958/country-boundries-using-google-map-api-v3">Country boundries using Google Map API v3</a></p>
  
  <p><a href="https://stackoverflow.com/questions/10874686/google-maps-v3-draw-german-state-polygons">Google Maps V3: Draw German State Polygons?</a></p>
  
  <p><a href="http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany" rel="nofollow noreferrer">http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany</a></p>
  
  <p>The last link there is VERY close to what I would want to do, except with multiple countries which is only a matter of adding more POI's in the form of countries.  But I can't get this to work on my site.</p>
  
  <p>Does anyone know of any good tutorials on how to do this? Or better yet, has anyone already done this type of thing with any success?</p>
  
  <p>Here's what I have currently:</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;script type="text/javascript"src="https://maps.googleapis.com/maps/api/&amp;sensor=false"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
            function initialize() {
          map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(27.246933444275317, 318.515625),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
  
          layer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
              select: "col38",
              from: "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA",
              where: "col2 in (\x27CAN\x27, \x27MEX\x27, \x27USA\x27, \x27JPN\x27
      )"
            },
            options: {
              styleId: 9,
              templateId: 8
            }
          });
        }
  
        google.maps.event.addDomListener(window, 'load', initialize);
          &lt;/script&gt;
  &lt;head&gt;
  
  &lt;body&gt;
        &lt;div id="map-canvas" style="width: 100%; height: 400px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks,</p>