CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3kml
user2126790
user2126790

Reputation: 37

Markers Not Showing in a Google Maps KML file

I have generated a map in the Google MyMaps web-application. Now I want to include it to my page (but not as an embedded map!).

I have downloaded a kml file and added it to a html page. Everything is okay except markers are not showing. Does anybody know what the problem is?

Here are my 3 files:

HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script src="http://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
<script src="script.js"></script>
</head>
<body onload="initialize()">
<h1>Map</h1>
<div id="map" style="width:750px;height:520px;"></div>
<div id="capture"></div>
</body>
</html>

Script.js:

var map;
var src = 'http://my-website.com/map.kml';
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);

KML:

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
<Document>
    <name>My Map</name>
    <description><![CDATA[]]></description>
    <NetworkLink>
        <name>locations</name>
        <Link>
            <href>http://mapsengine.google.com/map/kml?mid=zVGRYK81syB4.kFYbbKCtNMQw</href>
        </Link>
    </NetworkLink>
</Document>
</kml>

Upvotes: 0

Views: 1062

Answers (1)

geocodezip
geocodezip

Reputation: 161334

See the KML documentation <StyleMap> is not supported by KmlLayer.

Your kmz is using <StyleMap> to define the icons:

    <Style id='icon-960-F8971B-normal'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>0.0</scale>
        </LabelStyle>
    </Style>
    <Style id='icon-960-F8971B-highlight'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>1.1</scale>
        </LabelStyle>
    </Style>
    <StyleMap id='icon-960-F8971B'>
        <Pair>
            <key>normal</key>
            <styleUrl>#icon-960-F8971B-normal</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#icon-960-F8971B-highlight</styleUrl>
        </Pair>
    </StyleMap>

You need to remove those, use "standard icons" if you want it to work with KmlLayer (at least currently):

    <Style id='icon-960-F8971B'>
        <IconStyle>
            <color>ff1B97F8</color>
            <scale>1.1</scale>
            <Icon>
                <href>http://www.gstatic.com/mapspro/images/stock/960-wht-star-blank.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <scale>0.0</scale>
        </LabelStyle>
    </Style>

example with (partially) modified KMZ

Upvotes: 2

Related Questions