I want to add a svg icon to the google map marker. Right now i am able to create a svg icon by a single path, Please find the code below:
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z"; icon = { path: car , scale: 1 , strokeColor: 'white' , strokeWeight: .10 , fillOpacity: 1 , fillColor: '#8dc63f' , offset: '100%', //rotation: parseInt(heading[0]), anchor: new google.maps.Point(10, 25) }; marker.setIcon(icon);
And i am passing the icon to marker to display the icon on the map. And this is a single path.
And now i want to create a icon with the multi color using the svg path. So can anybody please post on how to create a multicolor svg path icon and passing it to a google map marker.
Per this link, you can use a data:image URL containing SVG for the icon of a marker.
var $markerImage = document.querySelector('.markerImage'), markerImageSvg = $markerImage.innerHTML || ''; var marker = new google.maps.Marker({ position: map.getCenter(), map: map, clickable: false, icon: { anchor: new google.maps.Point(16, 16), url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', colors[0])) } });
proof of concept fiddle
code snippet:
function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var $markerImage = document.querySelector('.markerImage'), markerImageSvg = $markerImage.innerHTML || ''; new google.maps.Marker({ position: map.getCenter(), map: map, clickable: false, icon: { anchor: new google.maps.Point(16, 16), url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', "#FF4847")) } }); } google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } .markerImage { display: none; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div> <div class="markerImage"> <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
