CODEWITHSUNDEEP
javascriptgoogle-mapssvg
A.Khvorov
A.Khvorov

Reputation: 65

Google maps marker as SVG (with image png tag inside)

Is it possible to use .png image inside SVG block as google maps marker? I want to have one picture and draw it in different colors with SVG filter so then use as google markers.

I am trying to use picture without filter at least for now:

var svg = '<?xml version="1.0"?>' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' +
          '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/>' +
          '</svg>';

var icon = {
  url: 'data:image/svg+xml;charset=UTF-8,' + svg,
  scaledSize: iconSize // scaled size
};

And if I will take svg code and try to use it just via browser it renders ok

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">
<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/>
</svg>

But it shows nothing while trying to use with google maps

Upvotes: 0

Views: 1691

Answers (2)

GeH
GeH

Reputation: 155

I had no success with embeding a PNG directly using it's URL, in a SVG marker for google maps. I tryied both http and https.

But, it works if you encode the binary file as data-uri :

var svg = '<?xml version="1.0"?>' +
          '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' +
          '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>' +
          '</svg>';

Upvotes: 1

tim.schurti
tim.schurti

Reputation: 54

I found a older Question that might help you.

Here

var markercolor = "#fff";
var icon = {
   path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
   fillColor: markercolor,
   fillOpacity: .6,
   anchor: new google.maps.Point(0,0),
   strokeWeight: 0,
   scale: 1
}

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon
});

I think the best way is to convert your .png in a .svg with a online converter or something similar. Is there any reason why you need a .png?

Upvotes: 0

Related Questions