From d68ef9a9cde003ecd74554521b1c50c4658b1cf1 Mon Sep 17 00:00:00 2001 From: Marc-Antoine Favreau <8480549+Heyian@users.noreply.github.com> Date: Wed, 20 Nov 2024 08:47:01 -0500 Subject: [PATCH] fix: Add color to Icon Marker on MapWidget --- .../filament-google-maps-widget.js | 2 +- resources/js/filament-google-maps-widget.js | 29 +++++++++++++++---- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js b/dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js index 8312c53..847e5e7 100644 --- a/dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js +++ b/dist/cheesegrits/filament-google-maps/filament-google-maps-widget.js @@ -3,7 +3,7 @@ var __create=Object.create,__defProp=Object.defineProperty,__getProtoOf=Object.g ${count} -`,title=`Cluster of ${count} markers`,zIndex=Number(google.maps.Marker.MAX_ZINDEX)+count;if(MarkerUtils.isAdvancedMarkerAvailable(map)){let svgEl=new DOMParser().parseFromString(svg,"image/svg+xml").documentElement;svgEl.setAttribute("transform","translate(0 25)");let clusterOptions2={map,position,zIndex,title,content:svgEl};return new google.maps.marker.AdvancedMarkerElement(clusterOptions2)}let clusterOptions={position,zIndex,title,icon:{url:`data:image/svg+xml;base64,${btoa(svg)}`,anchor:new google.maps.Point(25,25)}};return new google.maps.Marker(clusterOptions)}};function extend(type1,type2){for(let property in type2.prototype)type1.prototype[property]=type2.prototype[property]}var OverlayViewSafe=class{constructor(){extend(OverlayViewSafe,google.maps.OverlayView)}},MarkerClustererEvents;(function(MarkerClustererEvents2){MarkerClustererEvents2.CLUSTERING_BEGIN="clusteringbegin",MarkerClustererEvents2.CLUSTERING_END="clusteringend",MarkerClustererEvents2.CLUSTER_CLICK="click"})(MarkerClustererEvents||(MarkerClustererEvents={}));var defaultOnClusterClickHandler=(_,cluster,map)=>{map.fitBounds(cluster.bounds)},MarkerClusterer=class extends OverlayViewSafe{constructor({map,markers=[],algorithmOptions={},algorithm=new SuperClusterAlgorithm(algorithmOptions),renderer=new DefaultRenderer,onClusterClick=defaultOnClusterClickHandler}){super();this.markers=[...markers],this.clusters=[],this.algorithm=algorithm,this.renderer=renderer,this.onClusterClick=onClusterClick,map&&this.setMap(map)}addMarker(marker,noDraw){this.markers.includes(marker)||(this.markers.push(marker),noDraw||this.render())}addMarkers(markers,noDraw){markers.forEach(marker=>{this.addMarker(marker,!0)}),noDraw||this.render()}removeMarker(marker,noDraw){let index=this.markers.indexOf(marker);return index===-1?!1:(MarkerUtils.setMap(marker,null),this.markers.splice(index,1),noDraw||this.render(),!0)}removeMarkers(markers,noDraw){let removed=!1;return markers.forEach(marker=>{removed=this.removeMarker(marker,!0)||removed}),removed&&!noDraw&&this.render(),removed}clearMarkers(noDraw){this.markers.length=0,noDraw||this.render()}render(){let map=this.getMap();if(map instanceof google.maps.Map&&map.getProjection()){google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_BEGIN,this);let{clusters,changed}=this.algorithm.calculate({markers:this.markers,map,mapCanvasProjection:this.getProjection()});if(changed||changed==null){let singleMarker=new Set;for(let cluster of clusters)cluster.markers.length==1&&singleMarker.add(cluster.markers[0]);let groupMarkers=[];for(let cluster of this.clusters)cluster.marker!=null&&(cluster.markers.length==1?singleMarker.has(cluster.marker)||MarkerUtils.setMap(cluster.marker,null):groupMarkers.push(cluster.marker));this.clusters=clusters,this.renderClusters(),requestAnimationFrame(()=>groupMarkers.forEach(marker=>MarkerUtils.setMap(marker,null)))}google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){this.idleListener=this.getMap().addListener("idle",this.render.bind(this)),this.render()}onRemove(){google.maps.event.removeListener(this.idleListener),this.reset()}reset(){this.markers.forEach(marker=>MarkerUtils.setMap(marker,null)),this.clusters.forEach(cluster=>cluster.delete()),this.clusters=[]}renderClusters(){let stats=new ClusterStats(this.markers,this.clusters),map=this.getMap();this.clusters.forEach(cluster=>{cluster.markers.length===1?cluster.marker=cluster.markers[0]:(cluster.marker=this.renderer.render(cluster,stats,map),cluster.markers.forEach(marker=>MarkerUtils.setMap(marker,null)),this.onClusterClick&&cluster.marker.addListener("click",event=>{google.maps.event.trigger(this,MarkerClustererEvents.CLUSTER_CLICK,cluster),this.onClusterClick(event,cluster,map)})),MarkerUtils.setMap(cluster.marker,map)})}};function restArguments(func,startIndex){return startIndex=startIndex==null?func.length-1:+startIndex,function(){for(var length=Math.max(arguments.length-startIndex,0),rest=Array(length),index=0;indexpassed?timeout=setTimeout(later,wait-passed):(timeout=null,immediate||(result=func.apply(context,args)),timeout||(args=context=null))},debounced=restArguments(function(_args){return context=this,args=_args,previous=now_default(),timeout||(timeout=setTimeout(later,wait),immediate&&(result=func.apply(context,args))),result});return debounced.cancel=function(){clearTimeout(timeout),timeout=args=context=null},debounced}function filamentGoogleMapsWidget({cachedData,config,mapEl}){return{map:null,bounds:null,infoWindow:null,mapEl:null,data:null,markers:[],layers:[],modelIds:[],mapIsFilter:!1,clusterer:null,center:null,isMapDragging:!1,isIdleSkipped:!1,config:{center:{lat:0,lng:0},clustering:!1,controls:{mapTypeControl:!0,scaleControl:!0,streetViewControl:!0,rotateControl:!0,fullscreenControl:!0,searchBoxControl:!1,zoomControl:!1},fit:!0,mapIsFilter:!1,gmaps:"",layers:[],zoom:12,markerAction:null,mapConfig:[]},loadGMaps:function(){if(document.getElementById("filament-google-maps-google-maps-js")){let waitForGlobal=function(key,callback){window[key]?callback():setTimeout(function(){waitForGlobal(key,callback)},100)};waitForGlobal("filamentGoogleMapsAPILoaded",function(){this.createMap()}.bind(this))}else{let script=document.createElement("script");script.id="filament-google-maps-google-maps-js",window.filamentGoogleMapsAsyncLoad=this.createMap.bind(this),script.src=this.config.gmaps+"&callback=filamentGoogleMapsAsyncLoad",document.head.appendChild(script)}},init:function(){this.mapEl=document.getElementById(mapEl)||mapEl,this.data=cachedData,this.config={...this.config,...config},this.loadGMaps()},callWire:function(thing){},createMap:function(){window.filamentGoogleMapsAPILoaded=!0,this.infoWindow=new google.maps.InfoWindow({content:"",disableAutoPan:!0}),this.map=new google.maps.Map(this.mapEl,{center:this.config.center,zoom:this.config.zoom,...this.config.controls,...this.config.mapConfig}),this.center=this.config.center,this.createMarkers(),this.createClustering(),this.createLayers(),this.idle(),window.addEventListener("filament-google-maps::widget/setMapCenter",event=>{this.recenter(event.detail)}),this.show(!0)},show:function(force=!1){this.markers.length>0&&this.config.fit?this.fitToBounds(force):this.markers.length>0?this.map.setCenter(this.markers[0].getPosition()):this.map.setCenter(this.config.center)},createLayers:function(){this.layers=this.config.layers.map(layerUrl=>new google.maps.KmlLayer({url:layerUrl,map:this.map}))},createMarker:function(location){let markerIcon;location.icon&&typeof location.icon=="object"&&location.icon.hasOwnProperty("url")&&(markerIcon={url:location.icon.url},location.icon.hasOwnProperty("type")&&location.icon.type==="svg"&&location.icon.hasOwnProperty("scale")&&(markerIcon.scaledSize=new google.maps.Size(location.icon.scale[0],location.icon.scale[1])));let point=location.location,label=location.label,marker=new google.maps.Marker({position:point,title:label,model_id:location.id,...markerIcon&&{icon:markerIcon}});return this.modelIds.indexOf(location.id)===-1&&this.modelIds.push(location.id),marker},createMarkers:function(){this.markers=this.data.map(location=>{let marker=this.createMarker(location);return marker.setMap(this.map),this.config.markerAction&&google.maps.event.addListener(marker,"click",event=>{this.$wire.mountAction(this.config.markerAction,{model_id:marker.model_id})}),marker})},removeMarker:function(marker){marker.setMap(null)},removeMarkers:function(){for(let i=0;ilist1.filter(a=>isUnion===list2.some(b=>a.getPosition().lat()===b.getPosition().lat()&&a.getPosition().lng()===b.getPosition().lng())),inBoth=(list1,list2)=>operation(list1,list2,!0),inFirstOnly=operation,inSecondOnly=(list1,list2)=>inFirstOnly(list2,list1),newMarkers=this.data.map(location=>{let marker=this.createMarker(location);return marker.addListener("click",()=>{this.infoWindow.setContent(location.label),this.infoWindow.open(this.map,marker)}),marker});if(!this.config.mapIsFilter){let oldMarkersRemove=inSecondOnly(newMarkers,this.markers);for(let i=oldMarkersRemove.length-1;i>=0;i--){oldMarkersRemove[i].setMap(null);let index=this.markers.findIndex(marker=>marker.getPosition().lat()===oldMarkersRemove[i].getPosition().lat()&&marker.getPosition().lng()===oldMarkersRemove[i].getPosition().lng());this.markers.splice(index,1)}}let newMarkersCreate=inSecondOnly(this.markers,newMarkers);for(let i=0;i0&&this.config.fit&&(force||!this.config.mapIsFilter)){this.bounds=new google.maps.LatLngBounds;for(let marker of this.markers)this.bounds.extend(marker.getPosition());this.map.fitBounds(this.bounds)}},createClustering:function(){this.markers.length>0&&this.config.clustering&&(this.clusterer=new MarkerClusterer({map:this.map,markers:this.markers}))},updateClustering:function(){this.config.clustering&&(this.clusterer.clearMarkers(),this.clusterer.addMarkers(this.markers))},moved:function(){function areEqual(array1,array2){return array1.length===array2.length?array1.every((element,index)=>element===array2[index]):!1}console.log("moved");let bounds=this.map.getBounds(),ids=this.markers.filter(marker=>bounds.contains(marker.getPosition())).map(marker=>marker.model_id);areEqual(this.modelIds,ids)||(this.modelIds=ids,console.log(ids),this.$wire.set("mapFilterIds",ids))},idle:function(){if(this.config.mapIsFilter){let that=self,debouncedMoved=debounce(this.moved,1e3).bind(this);google.maps.event.addListener(this.map,"idle",event=>{if(self.isMapDragging){self.idleSkipped=!0;return}self.idleSkipped=!1,debouncedMoved()}),google.maps.event.addListener(this.map,"dragstart",event=>{self.isMapDragging=!0}),google.maps.event.addListener(this.map,"dragend",event=>{self.isMapDragging=!1,self.idleSkipped===!0&&(debouncedMoved(),self.idleSkipped=!1)}),google.maps.event.addListener(this.map,"bounds_changed",event=>{self.idleSkipped=!1})}},update:function(data){this.data=data,this.mergeMarkers(),this.updateClustering(),this.show()},recenter:function(data){this.map.panTo({lat:data.lat,lng:data.lng}),this.map.setZoom(data.zoom)}}}export{filamentGoogleMapsWidget as default}; +`,title=`Cluster of ${count} markers`,zIndex=Number(google.maps.Marker.MAX_ZINDEX)+count;if(MarkerUtils.isAdvancedMarkerAvailable(map)){let svgEl=new DOMParser().parseFromString(svg,"image/svg+xml").documentElement;svgEl.setAttribute("transform","translate(0 25)");let clusterOptions2={map,position,zIndex,title,content:svgEl};return new google.maps.marker.AdvancedMarkerElement(clusterOptions2)}let clusterOptions={position,zIndex,title,icon:{url:`data:image/svg+xml;base64,${btoa(svg)}`,anchor:new google.maps.Point(25,25)}};return new google.maps.Marker(clusterOptions)}};function extend(type1,type2){for(let property in type2.prototype)type1.prototype[property]=type2.prototype[property]}var OverlayViewSafe=class{constructor(){extend(OverlayViewSafe,google.maps.OverlayView)}},MarkerClustererEvents;(function(MarkerClustererEvents2){MarkerClustererEvents2.CLUSTERING_BEGIN="clusteringbegin",MarkerClustererEvents2.CLUSTERING_END="clusteringend",MarkerClustererEvents2.CLUSTER_CLICK="click"})(MarkerClustererEvents||(MarkerClustererEvents={}));var defaultOnClusterClickHandler=(_,cluster,map)=>{map.fitBounds(cluster.bounds)},MarkerClusterer=class extends OverlayViewSafe{constructor({map,markers=[],algorithmOptions={},algorithm=new SuperClusterAlgorithm(algorithmOptions),renderer=new DefaultRenderer,onClusterClick=defaultOnClusterClickHandler}){super();this.markers=[...markers],this.clusters=[],this.algorithm=algorithm,this.renderer=renderer,this.onClusterClick=onClusterClick,map&&this.setMap(map)}addMarker(marker,noDraw){this.markers.includes(marker)||(this.markers.push(marker),noDraw||this.render())}addMarkers(markers,noDraw){markers.forEach(marker=>{this.addMarker(marker,!0)}),noDraw||this.render()}removeMarker(marker,noDraw){let index=this.markers.indexOf(marker);return index===-1?!1:(MarkerUtils.setMap(marker,null),this.markers.splice(index,1),noDraw||this.render(),!0)}removeMarkers(markers,noDraw){let removed=!1;return markers.forEach(marker=>{removed=this.removeMarker(marker,!0)||removed}),removed&&!noDraw&&this.render(),removed}clearMarkers(noDraw){this.markers.length=0,noDraw||this.render()}render(){let map=this.getMap();if(map instanceof google.maps.Map&&map.getProjection()){google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_BEGIN,this);let{clusters,changed}=this.algorithm.calculate({markers:this.markers,map,mapCanvasProjection:this.getProjection()});if(changed||changed==null){let singleMarker=new Set;for(let cluster of clusters)cluster.markers.length==1&&singleMarker.add(cluster.markers[0]);let groupMarkers=[];for(let cluster of this.clusters)cluster.marker!=null&&(cluster.markers.length==1?singleMarker.has(cluster.marker)||MarkerUtils.setMap(cluster.marker,null):groupMarkers.push(cluster.marker));this.clusters=clusters,this.renderClusters(),requestAnimationFrame(()=>groupMarkers.forEach(marker=>MarkerUtils.setMap(marker,null)))}google.maps.event.trigger(this,MarkerClustererEvents.CLUSTERING_END,this)}}onAdd(){this.idleListener=this.getMap().addListener("idle",this.render.bind(this)),this.render()}onRemove(){google.maps.event.removeListener(this.idleListener),this.reset()}reset(){this.markers.forEach(marker=>MarkerUtils.setMap(marker,null)),this.clusters.forEach(cluster=>cluster.delete()),this.clusters=[]}renderClusters(){let stats=new ClusterStats(this.markers,this.clusters),map=this.getMap();this.clusters.forEach(cluster=>{cluster.markers.length===1?cluster.marker=cluster.markers[0]:(cluster.marker=this.renderer.render(cluster,stats,map),cluster.markers.forEach(marker=>MarkerUtils.setMap(marker,null)),this.onClusterClick&&cluster.marker.addListener("click",event=>{google.maps.event.trigger(this,MarkerClustererEvents.CLUSTER_CLICK,cluster),this.onClusterClick(event,cluster,map)})),MarkerUtils.setMap(cluster.marker,map)})}};function restArguments(func,startIndex){return startIndex=startIndex==null?func.length-1:+startIndex,function(){for(var length=Math.max(arguments.length-startIndex,0),rest=Array(length),index=0;indexpassed?timeout=setTimeout(later,wait-passed):(timeout=null,immediate||(result=func.apply(context,args)),timeout||(args=context=null))},debounced=restArguments(function(_args){return context=this,args=_args,previous=now_default(),timeout||(timeout=setTimeout(later,wait),immediate&&(result=func.apply(context,args))),result});return debounced.cancel=function(){clearTimeout(timeout),timeout=args=context=null},debounced}function filamentGoogleMapsWidget({cachedData,config,mapEl}){return{map:null,bounds:null,infoWindow:null,mapEl:null,data:null,markers:[],layers:[],modelIds:[],mapIsFilter:!1,clusterer:null,center:null,isMapDragging:!1,isIdleSkipped:!1,config:{center:{lat:0,lng:0},clustering:!1,controls:{mapTypeControl:!0,scaleControl:!0,streetViewControl:!0,rotateControl:!0,fullscreenControl:!0,searchBoxControl:!1,zoomControl:!1},fit:!0,mapIsFilter:!1,gmaps:"",layers:[],zoom:12,markerAction:null,mapConfig:[]},loadGMaps:function(){if(document.getElementById("filament-google-maps-google-maps-js")){let waitForGlobal=function(key,callback){window[key]?callback():setTimeout(function(){waitForGlobal(key,callback)},100)};waitForGlobal("filamentGoogleMapsAPILoaded",function(){this.createMap()}.bind(this))}else{let script=document.createElement("script");script.id="filament-google-maps-google-maps-js",window.filamentGoogleMapsAsyncLoad=this.createMap.bind(this),script.src=this.config.gmaps+"&callback=filamentGoogleMapsAsyncLoad",document.head.appendChild(script)}},init:function(){this.mapEl=document.getElementById(mapEl)||mapEl,this.data=cachedData,this.config={...this.config,...config},this.loadGMaps()},callWire:function(thing){},createMap:function(){window.filamentGoogleMapsAPILoaded=!0,this.infoWindow=new google.maps.InfoWindow({content:"",disableAutoPan:!0}),this.map=new google.maps.Map(this.mapEl,{center:this.config.center,zoom:this.config.zoom,...this.config.controls,...this.config.mapConfig}),this.center=this.config.center,this.createMarkers(),this.createClustering(),this.createLayers(),this.idle(),window.addEventListener("filament-google-maps::widget/setMapCenter",event=>{this.recenter(event.detail)}),this.show(!0)},show:function(force=!1){this.markers.length>0&&this.config.fit?this.fitToBounds(force):this.markers.length>0?this.map.setCenter(this.markers[0].getPosition()):this.map.setCenter(this.config.center)},createLayers:function(){this.layers=this.config.layers.map(layerUrl=>new google.maps.KmlLayer({url:layerUrl,map:this.map}))},createMarker:function(location){let markerIcon;location.icon&&typeof location.icon=="object"&&location.icon.hasOwnProperty("url")&&(markerIcon={url:location.icon.url},location.icon.hasOwnProperty("type")&&location.icon.type==="svg"&&(location.icon.hasOwnProperty("color")&&fetch(location.icon.url).then(response=>response.text()).then(svgContent=>{let coloredSvg=svgContent.replace(/]*fill="[^"]*"/,match=>match.replace(/fill="[^"]*"/,`fill="${location.icon.color}"`)),svgBlob=new Blob([coloredSvg],{type:"image/svg+xml"}),svgUrl=URL.createObjectURL(svgBlob);markerIcon.url=svgUrl,marker.setIcon(markerIcon)}),location.icon.hasOwnProperty("scale")&&(markerIcon.scaledSize=new google.maps.Size(location.icon.scale[0],location.icon.scale[1]))));let point=location.location,label=location.label,marker=new google.maps.Marker({position:point,title:label,model_id:location.id,...markerIcon&&{icon:markerIcon}});return this.modelIds.indexOf(location.id)===-1&&this.modelIds.push(location.id),marker},createMarkers:function(){this.markers=this.data.map(location=>{let marker=this.createMarker(location);return marker.setMap(this.map),this.config.markerAction&&google.maps.event.addListener(marker,"click",event=>{this.$wire.mountAction(this.config.markerAction,{model_id:marker.model_id})}),marker})},removeMarker:function(marker){marker.setMap(null)},removeMarkers:function(){for(let i=0;ilist1.filter(a=>isUnion===list2.some(b=>a.getPosition().lat()===b.getPosition().lat()&&a.getPosition().lng()===b.getPosition().lng())),inBoth=(list1,list2)=>operation(list1,list2,!0),inFirstOnly=operation,inSecondOnly=(list1,list2)=>inFirstOnly(list2,list1),newMarkers=this.data.map(location=>{let marker=this.createMarker(location);return marker.addListener("click",()=>{this.infoWindow.setContent(location.label),this.infoWindow.open(this.map,marker)}),marker});if(!this.config.mapIsFilter){let oldMarkersRemove=inSecondOnly(newMarkers,this.markers);for(let i=oldMarkersRemove.length-1;i>=0;i--){oldMarkersRemove[i].setMap(null);let index=this.markers.findIndex(marker=>marker.getPosition().lat()===oldMarkersRemove[i].getPosition().lat()&&marker.getPosition().lng()===oldMarkersRemove[i].getPosition().lng());this.markers.splice(index,1)}}let newMarkersCreate=inSecondOnly(this.markers,newMarkers);for(let i=0;i0&&this.config.fit&&(force||!this.config.mapIsFilter)){this.bounds=new google.maps.LatLngBounds;for(let marker of this.markers)this.bounds.extend(marker.getPosition());this.map.fitBounds(this.bounds)}},createClustering:function(){this.markers.length>0&&this.config.clustering&&(this.clusterer=new MarkerClusterer({map:this.map,markers:this.markers}))},updateClustering:function(){this.config.clustering&&(this.clusterer.clearMarkers(),this.clusterer.addMarkers(this.markers))},moved:function(){function areEqual(array1,array2){return array1.length===array2.length?array1.every((element,index)=>element===array2[index]):!1}console.log("moved");let bounds=this.map.getBounds(),ids=this.markers.filter(marker=>bounds.contains(marker.getPosition())).map(marker=>marker.model_id);areEqual(this.modelIds,ids)||(this.modelIds=ids,console.log(ids),this.$wire.set("mapFilterIds",ids))},idle:function(){if(this.config.mapIsFilter){let that=self,debouncedMoved=debounce(this.moved,1e3).bind(this);google.maps.event.addListener(this.map,"idle",event=>{if(self.isMapDragging){self.idleSkipped=!0;return}self.idleSkipped=!1,debouncedMoved()}),google.maps.event.addListener(this.map,"dragstart",event=>{self.isMapDragging=!0}),google.maps.event.addListener(this.map,"dragend",event=>{self.isMapDragging=!1,self.idleSkipped===!0&&(debouncedMoved(),self.idleSkipped=!1)}),google.maps.event.addListener(this.map,"bounds_changed",event=>{self.idleSkipped=!1})}},update:function(data){this.data=data,this.mergeMarkers(),this.updateClustering(),this.show()},recenter:function(data){this.map.panTo({lat:data.lat,lng:data.lng}),this.map.setZoom(data.zoom)}}}export{filamentGoogleMapsWidget as default}; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. diff --git a/resources/js/filament-google-maps-widget.js b/resources/js/filament-google-maps-widget.js index 17ca230..9cd6263 100644 --- a/resources/js/filament-google-maps-widget.js +++ b/resources/js/filament-google-maps-widget.js @@ -144,13 +144,30 @@ export default function filamentGoogleMapsWidget({ if ( location.icon.hasOwnProperty("type") && - location.icon.type === "svg" && - location.icon.hasOwnProperty("scale") + location.icon.type === "svg" ) { - markerIcon.scaledSize = new google.maps.Size( - location.icon.scale[0], - location.icon.scale[1] - ); + if (location.icon.hasOwnProperty("color")) { + fetch(location.icon.url) + .then(response => response.text()) + .then(svgContent => { + const coloredSvg = svgContent.replace(/]*fill="[^"]*"/, (match) => { + return match.replace(/fill="[^"]*"/, `fill="${location.icon.color}"`); + }); + + const svgBlob = new Blob([coloredSvg], { type: 'image/svg+xml' }); + const svgUrl = URL.createObjectURL(svgBlob); + + markerIcon.url = svgUrl; + marker.setIcon(markerIcon); + }); + } + + if (location.icon.hasOwnProperty("scale")) { + markerIcon.scaledSize = new google.maps.Size( + location.icon.scale[0], + location.icon.scale[1] + ); + } } } }