jquery - Create Google Maps MarkerImage from SVG in DOM -


i'm trying create dynamic svg marker (basically having text part of svg change each marker) in google maps, i'm struggling dynamic aspect of it. can see in code below, can create svg marker using new google.maps.markerimage() static url.

var marker = new google.maps.marker({     position: new google.maps.latlng(38.4269929, -81.7921109),     icon: new google.maps.markerimage('https://dl.dropboxusercontent.com/u/64084190/test-marker.svg',     null, null, null, new google.maps.size(25, 25)),     map: map }); 

but can't seem google.maps.markerimage() take inner html of svg dom element first argument - looking url.

<svg id="svg_elem"></svg>  function createdynamicsvgmarker(id){     var svg_elem = d3.select('#svg_elem');     svg_elem.append('path')         .attr('fill', "#3875d7")         .attr('d', "m100 0h-100v100h36.768l13.431 19.876 13.431-19.876h36.37z");     svg_elem.append('text')         .attr('transform', "translate(30.979 80)")         .attr("fill", "#fff")         .attr("font-size", "36")         .text(id);      var marker = new google.maps.marker({         position: new google.maps.latlng(38.4269929, -81.7921109),         icon: new google.maps.markerimage($('#svg_elem').html(),         null, null, null, new google.maps.size(25, 25)),         map: map     });     $('#svg_elem').empty(); } 

should using markerimage or there better approach tackling problem? have tried in node.js (but failed) - creating new svg each id (or creating svg , saving png) - thought more efficient on client side. i'm open suggestions using node.js or client side code.

markerimage has been deprecated in maps v3.

in case, check out symbols developers guide, , this example:

based on example, try this:

var marker = new google.maps.marker({     position: new google.maps.latlng(38.4269929, -81.7921109),     icon: {         path: $('#svg_elem').attr('d'),         //style elements: fillcolor, strokeweight, etc         // ...     },     map: map }); 

i'm not sure if can you'd in 1 svg path (text, etc) should of way there. there other methods in google maps api may able text on top without hassle.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -