2

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.

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.

I have stumbled on these, but still can't figure it out.

Country boundries using Google Map API v3

Google Maps V3: Draw German State Polygons?

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany

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.

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?

Here's what I have currently:

<head>

<script type="text/javascript"src="https://maps.googleapis.com/maps/api/&sensor=false"></script>

        <script type="text/javascript">
          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);
        </script>
<head>

<body>
      <div id="map-canvas" style="width: 100%; height: 400px;"></div>
</body>

Thanks,

Community
  • 1
  • 1
joshrathke
  • 7,564
  • 7
  • 23
  • 38

1 Answers1

1

I think you need the "IN" operator:

example

And I would suggest using the "iso" column to reduce the size of the query string.

your code works for me

Note: I did fix this "unterminated string":

        where: "col2 in (\x27CAN\x27, \x27MEX\x27, \x27USA\x27, \x27JPN\x27
)"

Example allowing selection of multiple countries:

http://www.geocodezip.com/v3_FusionTables_MultiCountryBrowser.html?countries=Afghanistan,Albania,Algeria,Brazil

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Thanks, I am getting really close. Are there additional scripts that I need to load in conjunction with google maps to utilize fusion tables. I tried loading the scripts in the example with no avail. All I get is an empty
    when I load the page.
     – joshrathke Apr 08 '13 at 23:55
  • I updated my post to include the code I am working with, I removed everything irrelevent to google maps. – joshrathke Apr 09 '13 at 00:15
  • Your code works for me. What is it not doing that you expect it to do? – geocodezip Apr 09 '13 at 00:34
  • Sweet! Got it to work. However, my map is a little glitchy, some of the controls are loading a little funky looking, and the map doesn't quite refresh properly if zoomed in. But, it's a MASSIVE step in the right direction! Thanks for helping out. – joshrathke Apr 09 '13 at 05:22