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> 1 Answers
Answers 1
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.
0 comments:
Post a Comment