CODEWITHSUNDEEP
javascriptapigoogle-mapskml
NightHawk
NightHawk

Reputation: 3681

Google Maps API, using a KML file, map is blank

the following code in my KML shows a gray map:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>
    <name>test.kml</name>

    <Placemark>
            <name>Cha Boutique</name>
            <description>
                <![CDATA[
                    9666 Clayton Rd.<br />
                    Ladue, MO 63124<br />
                    Phone: 314-993-8080
                ]]>
            </description>
            <Point>
                <coordinates>38.638428,-90.389736</coordinates>
            </Point>
        </Placemark>

    </Document>
</kml>

But this code successfully shows a marker:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>

        <name>test.kml</name>

<Placemark>
    <name>Yahoo! Inc.</name>
    <description><![CDATA[
      Yahoo! Inc.<br />
      701 First Avenue<br />
      Sunnyvale, CA 94089<br />
      Tel: (408) 349-3300<br />
      Fax: (408) 349-3301<br />
      <p>Home page: <a href="http://yahoo.com">http://yahoo.com</a></p>
      ]]>
    </description>
    <Point>
      <coordinates>-122.0250403,37.4163228</coordinates>
    </Point>
  </Placemark>

    </Document>
</kml>

The javascript that creates the map is:

Event.observe(window, 'load', function()
{
var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var myOptions = {
    zoom: 11,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.domain.com/test.kml');
  ctaLayer.setMap(map);
});

Does anybody have any idea what I'm missing here? If you think this should absolutely work, then I need to start looking at other stuff on the site that may be impacting this, but to me, swapping out KML markers shouldn't be a factor in whether it works or not, unless I have some error.

Thanks for any help!

-Ryan

Upvotes: 0

Views: 3045

Answers (3)

egidiocs
egidiocs

Reputation: 2847

new google.maps.KmlLayer() requires a full qualified domain name. eg: http://localhost cannot be used.

Upvotes: 2

NightHawk
NightHawk

Reputation: 3681

What's that thing about never trusting user input?

Turns out, the coordinates were reversed. They came straight from Google Maps after the address was typed in (from their URL), but it would appear that the KML file needs them in reverse order.

A lesson well learned :)

-Ryan

Upvotes: 2

Sorean
Sorean

Reputation: 995

Have you tested if the kml loads in google maps?

If you go to maps.google.com there should be a my maps link (on the left hand side) that lets you import the KML file. If it loads then I would start looking at your code, if not, it could be a problem with the KML file itself.

Edit: I tried to load the kml files and it seems to be causing my google maps to freeze using chrome so I can't really tell you if it's the kml or not, but to me it looks like a well formed xml file.

Upvotes: 1

Related Questions