CODEWITHSUNDEEP
javascriptgoogle-mapssvggoogle-maps-api-3
showtime
showtime

Reputation: 1462

Why this SVG is not being displayed in Google Maps (JavaScript)?

I am using SVG files to display icons in the map but one particular SVG doesnt work. I have tested that file and it looks fine in the browser, however, when doing that in the code, it just doesnt display anything , neither it fails:

let svgColor = 'red';
let strokeColor = "#00a0d6";

let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
};
return icon_;

I have heard before that some SVG complex files are not recognized by Google Service, could it be that case?

I have prepared a jsfiddle test: http://jsfiddle.net/9u2kgxth/

code snippet (from fiddle):

var map;
var polyLine;
var polyOptions;
var rotation = 0;

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {

    addPoint(event);
  });
}

function addPoint(event) {

  let svgColor = 'red';
  let strokeColor = "#00a0d6";

  let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

  const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
  };

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

  map.panTo(event.latLng);

  rotation += 10;
}

initialize();
body {
  font-family: Arial;
  font-size: 20px;
  line-height: 40px;
}

#map-canvas {
  height: 400px;
  width: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Click on map to add markers...
<div id="map-canvas"></div>

Upvotes: 0

Views: 185

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Your <svg> is missing the namespace (as @RobertLongson indicated in his comment):

var svg = '<svg height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

should be:

var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

proof of concept fiddle

enter image description here

code snippet:

var map;
var polyLine;
var polyOptions;
var rotation = 0;

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  addPoint({
    latLng: map.getCenter()
  })

  google.maps.event.addListener(map, 'click', function(event) {

    addPoint(event);
  });
}

function addPoint(event) {

  let svgColor = 'red';
  let strokeColor = "#00a0d6";

  let innerSvg = '<path d="M19.64,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,19.64,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,16.41a2.07,2.07,0,1,1-2.06,2.06A2.07,2.07,0,0,1,6.25,16.41Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M9,8.17c-1.55,0-4.5,4.49-4.5,4.49S.68,13.93.68,15.79v2.69H3.44a1.23,1.23,0,0,1,0-.2,2.7,2.7,0,0,1,.29-1.07,2.81,2.81,0,0,1,5.32,1.27h7.78a2.81,2.81,0,0,1,5.31-1.27,2.58,2.58,0,0,1,.29,1,2.36,2.36,0,0,1,0,.25h1.61l.39-.53V8.15S10.51,8.18,9,8.17Z" style="fill:' + svgColor + ';stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M19.64,19.6a1.13,1.13,0,1,0-1.12-1.13A1.13,1.13,0,0,0,19.64,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.25,19.6a1.13,1.13,0,1,0-1.12-1.13A1.12,1.12,0,0,0,6.25,19.6Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  innerSvg = innerSvg + '<path d="M6.26,12.26s2.2-3,2.84-3h3.23v3Z" style="fill:#fff;stroke:' + strokeColor + ';stroke-miterlimit:1.0800000429153442;stroke-width:0.5400000214576721px"/>';
  var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="40" width="150">' +
    innerSvg +
    '<text x="0" y="7" font-size="7pt" font-weight="bold" text-anchor="left" fill="black">Test</text>' +
    '</svg>';

  const icon_ = {
    url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg),
    anchor: new google.maps.Point(15, 30),
  };
  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon_
  });

  map.panTo(event.latLng);

  rotation += 10;
}

initialize();
body,
html {
  font-family: Arial;
  font-size: 20px;
  line-height: 40px;
  height: 100%;
  width: 100%;
}

#map-canvas {
  height: 90%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Click on map to add markers...
<div id="map-canvas"></div>

Upvotes: 1

Related Questions