Использовать SVG для маркера в Google Maps?

Question

я знаю, что можно добавить svg-оверлеи на карты Google. Мне интересно, если вы можете использовать SVG-файлы в качестве маркеров. Я попытался установить его так же, как вы бы файл png или jpg, но ничего не появляется. дайте мне знать, если я должен опубликовать свой код, но я думаю, что я, вероятно, неправильно его подхожу.

спасибо.

Answer 1

В Google Maps API v3 он прекрасно работает с этим кодом (который также обрабатывает изменение размера):

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  icon: new google.maps.MarkerImage('/path/to/icon.svg',
    null, null, null, new google.maps.Size(64,64)),
  draggable: false,
  map: map
});

Answer 2

У меня была проблема с этим, но я посмотрел на svg в редакторе кода, и ему не хватало определенной ширины и высоты.

Не работало

<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" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3"
    xml:space="preserve">

Работало

<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="33px" height="50px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3" 
    xml:space="preserve">

Answer 3

При ссылке на внешний SVG вам нужно использовать scaledSize вместо size для иконки. Смотрите фрагмент кода ниже ...

function initMap() {
  var springfield = {
    lat: 39.9354165,
    lng: -83.8215624
  };

  var homer = {
    url: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg',
    scaledSize: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  }

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: springfield
  });

  var marker = new google.maps.Marker({
    position: springfield,
    map: map,
    icon: homer,
    draggable: true
  });
}

#map {
  height: 400px;
  width: 100%;
}

<script async defer src="//maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

Answer 4

var marker = new google.maps.Marker({
        icon: {
            size: new google.maps.Size(21, 45),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(21, 45),
            url: `data:image/svg+xml;utf-8,
                        <svg width="21" height="45" viewBox="0 0 21 45" xmlns="http://www.w3.org/2000/svg"><title>POINT</title><desc>Created with Sketch.</desc><g transform="translate(-651 -1250) translate(651 1250)" fill="#F76A4C"><circle cx="10.5" cy="10.5" r="10.5"/><path d="M9 19h3v26h-3z"/></g></svg>`
        }
    });

Живой пример на codepen .