Google maps api - add a kml layer to a map

0
votes

I've been playing around with the google maps api through javascript (I'm also new to javascript). I've experimented with adding info windows and markers to the map by following the api examples.

What I want to do is overlay a KML file onto a map of Ireland - and I searched the fusion tables for the KML file contains the information for the borders of the counties of Ireland.

The kml file came from a fusion table here: http://www.google.com/fusiontables/DataSource?dsrcid=935280&search=ireland+counties&cd=0

I exported it to a kml file and uploaded it to a public site (see javascript - I'm not able to post more than 2 links)

I'm trying to load the kml file in the link below - that map I've selected appears but the KML overlay does not. http://songsaboutsuperheroes.com/index.html

I've tried using a link to the fusion table ID and had no luck with that. I've also tried to use the KML Network link and had no luck with that.

So I'm trying to load the KML file directly like I've seen in tutorials. Can anyone point me in the right direction - I'm not sure what I'm doing wrong - thanks in advance!

Here is the Javascript I'm using: 

  function initialize() {

    var latlng = new google.maps.LatLng(53.36942,-6.378288);

    var myOptions = {
                        zoom: 7 ,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);                       


  var myLayer = new google.maps.KmlLayer(
       'http://songsaboutsuperheroes.com/Ireland_Counties.kml');
  myLayer.setMap(map);
 }
2
google-maps-api-3

2 Answers

1
votes

This works - I accessed the fusion table that holds the kml data directly:

var latlng = new google.maps.LatLng(53.36942,-6.378288);

var myOptions = {
        zoom: 7,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };


var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);                       
layer = new google.maps.FusionTablesLayer(935280, {
                                         suppressInfoWindows: true
                                    });

layer.setQuery("select geometry,name_1 from 935280");
layer.setMap(map);
0
votes
    var kmlUrl = 'http://www.yoursite.com/YOUR_KML_FILE.kml';

 var KML_single = new google.maps.KmlLayer(kmlUrl, {color:"#4385F1" } );


 KML_single.setMap(map);


    EXML_single = new GeoXml("EXML_single", map, kmlUrl, {
                            sidebarid:"sidebar",
                            iwwidth:280

                        }); 
    EXML_single.parse('SOME LOADING TEXT HERE');