CODEWITHSUNDEEP
google-maps
Kenci
Kenci

Reputation: 4882

Can I use a SVG icon for markers in a KML file?

I have a KML file which I am passing on to Google Maps.

The KML file has a <Style> element, where I want to point to a .SVG file. The intention is that the marker should auto-scale when zooming in our out on the map.

The markup is below:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <Document>
      <name>Some Name</name>
      <Style id="GarageStyle">
         <IconStyle>
            <Icon>
               <href>https://drive.google.com/uc?export=download&id=0B7m5RwNbU3b0VmpzRnI0aTBGbmM</href>
            </Icon>
         </IconStyle>
      </Style>
      <Placemark>
         <name>Skave Autoværksted*</name>
         <styleUrl>#GarageStyle</styleUrl>
         <description>&amp;lt;div style="clear: both; display: block; "&amp;gt;Skave Autoværksted*&amp;lt;/div&amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;Viborgvej 240&amp;lt;/div&amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;7500 Holstebro&amp;lt;/ div &amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;Tlf: 97468101&amp;lt;/ div &amp;gt;</description>
         <address>Viborgvej 240, 7500 Holstebro</address>
         <Point>
            <coordinates>8.80521163606404,56.3903905969469</coordinates>
         </Point>
      </Placemark>
   </Document>
</kml>

It doesnt work with the .SVG, but works with .PNG - is that because Google doesnt support .SVG icons for markers, or am I doing it wrong?

The code that initializes the map:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://maps.google.com/maps/api/js?key=MY_PRIVATE_KEY;callback?sensor=false" type="text/javascript"></script>
    <script src="/Webresources/ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
    </style>
    <meta>
    <meta>
</head>
<body style="word-wrap: break-word;">
    <div id="map"></div>

    <script type="text/javascript">


        var attributes = GetGlobalContext().getQueryStringParameters().data;

        var attributesSplit = attributes.split(",");

        var addressField;
        var zoom;
        var mapType;

        var arrayLength = attributesSplit.length;

        for (var i = 0; i < arrayLength; i++) {
            var currentAttribute = attributesSplit[i].split("=");

            var attributeName = currentAttribute[0];
            var attributeValue = currentAttribute[1];

            switch (attributeName) {
                case "address_field":
                    addressField = attributeValue;
                    break;
                case "zoom":
                    zoom = parseInt(attributeValue);
                    break;
                case "maptype":
                    mapTypeConfigured = attributeValue;
                    switch (mapTypeConfigured) {
                        case "terrain":
                            mapType = google.maps.MapTypeId.TERRAIN;
                            break;
                        case "satellite":
                            mapType = google.maps.MapTypeId.SATELLITE;
                            break;
                        default:
                            break;
                    }
                    break;
                default:
                    break;
            }
        }

        // Set zoom to default value if it has not been configured
        if (!zoom) {
            zoom = 16;
        }
        if (!mapType) {
            mapType = google.maps.MapTypeId.SATELLITE;
        }

        var address = window.parent.Xrm.Page.getAttribute(addressField).getValue();

        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: mapType,
            zoom: zoom
        });

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({
            'address': address
        },
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map
                    });
                    map.setCenter(results[0].geometry.location);
                }
            });

        var ctaLayer = new google.maps.KmlLayer({       
            url: generateUrl('URL_TO_KML_FILE'),
            map: map,
            preserveViewport: true
        });
        // Used to refresh the KML cache twice a day 
        function generateUrl(url) {

            var dateObj = new Date();
            var month = dateObj.getUTCMonth() + 1; //months from 1-12
            var day = dateObj.getUTCDate();
            var year = dateObj.getUTCFullYear();

            var currentHour = dateObj.getHours();

            var noon;

            if(currentHour >= 12)
            {
                noon = "afterNoon";
            }
            else
            {
                noon = "beforeNoon";
            }

            var newdate = "&" + year + "_" + month + "_" + day + "_" + noon;

            var newUrl = url + newdate;

            return newUrl;
        }

    </script>

</body>
</html>

Upvotes: 3

Views: 2148

Answers (1)

Kenci
Kenci

Reputation: 4882

The problem in my example is that the URL needs to have an extension. Since I am hosting it on Google Drive there is no extension, hence the problem. So the URL should end with .SVG, .PNG or whatever is being used.

Upvotes: 2

Related Questions