CODEWITHSUNDEEP
javascriptgoogle-mapssvg
Uncontrolled Crowd
Uncontrolled Crowd

Reputation: 23

Inline SVG not showing as marker in google maps

I created a SVG in Illustrator CC which is declared as variable in inline JS, tried all options that Illustrator is offering but none of the SVG's work. I am trying to use this var as a marker in google maps. I found this article: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker and using the inline SVG from it works but my SVG doesn't. Does anyone know how should I save the SVG in Illustrator to make it work as marker in Google Maps? Here is the code that I am using (in this example I am using the inline SVG from the article):

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&v=3.21.5a&libraries=drawing&signed_in=true&libraries=places,drawing"></script>
    <style type="text/css">
      #map, html, body {
        padding: 0;
        margin: 0;
        height: 90%;
      }
    </style>
    <script type="text/javascript">

function initialize() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: new google.maps.LatLng(41.0257978,21.293566),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true,
    zoomControl: false
  });

  var myIcon = new google.maps.MarkerImage('data:image/svg+xml;utf-8, \
  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> \
  <path fill="red" stroke="white" stroke-width="1.5" d="M3.5 3.5h25v25h-25z" ></path> \
  </svg>', null, null, null, new google.maps.Size(21,30));

  google.maps.event.addListener(map, 'click', function(e) {
    var myLatLng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon:myIcon
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
     <div id="map">A</div>
  </body>
</html>

And this is the SVG that i am trying to use:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2DB450;}
    .st1{fill:#FFFFFF;}
</style>
<g transform="translate(40 -93)">
    <circle class="st0" cx="-255" cy="490" r="45"/>
    <path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490
        l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/>
</g>
</svg>

EDIT: What I found out is that if I save the SVG file and use the file name in the url parameter instead embedding the SVG code in it, it is working on all browsers. But sadly i have to embed the code. Anyone solution about this?

Upvotes: 1

Views: 3759

Answers (1)

geocodezip
geocodezip

Reputation: 161404

Replace the "red box with the white border" SVG in your posted code with the SVG you also posted (as Robert Longson observed in the comments, to work in browsers other than Chrome, the # must be URL encoded):

var myIcon = {
  url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
  size: new google.maps.Size(32, 32),
  scaledSize: new google.maps.Size(20, 20)
};

(note: the MarkerImage class was deprecated a long time ago, replaced with the Icon anonymous object specification)

proof of concept fiddle

enter image description here

code snippet:

function initialize() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: new google.maps.LatLng(41.0257978, 21.293566),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true,
    zoomControl: false
  });

  var myIcon = {
    url: 'data:image/svg+xml;utf-8, <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="-260 352 90 90" style="enable-background:new -260 352 90 90;" xml:space="preserve"><style type="text/css"> .st0{fill:%232DB450;} .st1{fill:%23FFFFFF;}</style><g transform="translate(40 -93)"><circle class="st0" cx="-255" cy="490" r="45"/><path class="st1" d="M-245.9,492.1h4.2l-13.5-27.1l-13.6,27.1h4.2l-9.4,16.7h13.5v6.2h10.5v-6.2h13.5L-245.9,492.1z M-265.4,490 l10.2-20.3l10.1,20.3H-265.4z M-252.1,512.9h-6.2v-4.1h6.2V512.9z M-270.4,506.7l8.2-14.6h14l8.2,14.6H-270.4z"/></g></svg>',
    size: new google.maps.Size(32, 32),
    scaledSize: new google.maps.Size(20, 20)
  };

  google.maps.event.addListener(map, 'click', function(e) {
    var myLatLng = {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    };
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: myIcon
    });
  });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: myIcon
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Upvotes: 8

Related Questions