Reputation: 4882
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>&lt;div style="clear: both; display: block; "&gt;Skave Autoværksted*&lt;/div&gt;&lt;div style="clear: both; display: block; "&gt;Viborgvej 240&lt;/div&gt;&lt;div style="clear: both; display: block; "&gt;7500 Holstebro&lt;/ div &gt;&lt;div style="clear: both; display: block; "&gt;Tlf: 97468101&lt;/ div &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
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