¿Utiliza un SVG para un marcador en Google Maps?

sé que es posible agregar superposiciones svg a google maps. Me pregunto si puedes usar archivos svg como marcadores. Intenté configurarlo como si fuera un archivo png o jpg, pero no aparece nada. avíseme si debería publicar mi código, pero creo que probablemente me estoy acercando de la manera incorrecta.¿Utiliza un SVG para un marcador en Google Maps?

gracias.

Fuente

2010-10-15 vee

nadie ha hecho esto antes? – vee

alguien puede ayudar con esto ... – vee

En Google Maps API v3 que está funcionando bien para mí con este código (que también maneja el cambio de tamaño):

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 
});

Fuente

2012-08-31 11:18:11

de esta manera, gmaps creará una etiqueta de todos modos. ¡debería usar un Símbolo (https://developers.google.com/maps/documentation/javascript/symbols) en su lugar! – Khalizar

Si tiene problemas para implementarlo en IE11, busque en esta solución para ayudar a resolver cualquier problema: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

Solo una nota: si tiene animación en su archivo svg, necesita agregar la opción optimizar, establecer en falso – Scalpweb

que tenía un problema con esto, pero miré el SVG en un editor de código y se faltaba un ancho y una altura definidos.

no funcionó

<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">

No trabajó

<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">

Fuente

2014-02-14 15:20:53 Thomas

Esto junto con la respuesta de Yuval Adam funciona mejor ... el tamaño debe especificarse explícitamente en el archivo SVG, y el 'google.maps.Size()' realmente define el tamaño de visualización real en el mapa. – mch

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>` 
     } 
    });

ejemplo vivo de codepen.

Fuente

2016-09-27 08:37:09

Al hacer referencia a un SVG externo, debe usar scaledSize en lugar de size para el icono. Ver fragmento de código a continuación ...

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>

Fuente

2017-02-28 06:17:28

¿Utiliza un SVG para un marcador en Google Maps?

Respuesta

Cuestiones relacionadas