Cómo utilizar los marcadores SVG en Google Maps API v3

¿Puedo usar mi image.svg convertida como ícono de mapa de google? Estaba convirtiendo mi imagen png en svg y quiero usar esto como un símbolo de mapa de Google que se puede rotar. Ya traté de usar el símbolo del mapa de google, pero quiero tener un ícono como auto, hombre, etc. Es por eso que convertí mis archivos png a svg, al igual que este sitio de ejemplo, ¿qué usa para estos http: / /www.goprotravelling.com/

Puede renderizar su icono usando la notación de ruta SVG .

Consulte la documentación de Google para obtener más información.

Aquí hay un ejemplo básico:

var icon = { path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", fillColor: '#FF0000', 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 }); 

Aquí hay un ejemplo de trabajo sobre cómo mostrar y escalar un icono de marcador SVG:

Demostración de JSFiddle

Editar:

Otro ejemplo aquí con un ícono complejo:

Demostración de JSFiddle

Editar 2:

Y así es como puedes tener un archivo SVG como un ícono:

Demostración de JSFiddle

Si necesita una svg completa no solo una ruta y desea que sea modificable en el lado del cliente (por ejemplo, cambiar texto, ocultar detalles, …) puede utilizar una ‘URL’ de datos alternativa con svg incluido:

 var svg = ''; icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); 

JavaScript (Firefox) btoa () se usa para obtener la encoding base64 del texto SVG. También puede usar http://dopiaza.org/tools/datauri/index.php para generar URL de datos básicos.

Aquí hay un ejemplo completo jsfiddle :

 < !DOCTYPE html>       

Información adicional se puede encontrar aquí .

Evitar la encoding base64:

Para evitar la encoding de base64 puede reemplazar 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) con 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

Esto debería funcionar con los navegadores modernos hasta IE9. La ventaja es que encodeURIComponent es una función js predeterminada y está disponible en todos los navegadores modernos. También puede obtener enlaces más pequeños, pero debe probar esto y considerar utilizar ' lugar de " en su svg.

Consulte también Optimizar SVG en URI de datos para obtener información adicional.

Compatibilidad con IE: para admitir marcadores SVG en IE, se necesitan dos adaptaciones pequeñas como se describe aquí: Marcadores SVG en IE . Actualicé el código de ejemplo para admitir IE.

Sé que esta publicación es un poco vieja, pero he visto tanta información mala sobre esto en SO que pude gritar. Así que tengo que poner mi granito de arena con un enfoque completamente diferente que sé que funciona, ya que lo uso de manera confiable en muchos mapas. Además de eso, creo que OP también quería rotar el marcador de flecha alrededor del punto del mapa, que es diferente a girar el ícono alrededor de su propio eje x, y, que cambiará a donde apunta el marcador de flecha en el mapa.

En primer lugar, recuerde que estamos jugando con Google Maps y SVG, por lo que debemos acomodar la forma en que Google implementa su implementación de SVG para marcadores (o realmente símbolos). Google establece su ancla para la imagen de marcador SVG en 0,0 que NO ES la esquina superior izquierda de SVG viewBox. Para evitar esto, debe dibujar su imagen SVG un poco diferente para darle a Google lo que quiere … sí, la respuesta está en la forma en que realmente crea la ruta SVG en su editor SVG (Illustrator, Inkscape, etc. .).

El primer paso es deshacerse de ViewBox. Esto se puede hacer estableciendo viewBox en su XML en 0 … eso es correcto, solo un cero en lugar de los cuatro argumentos habituales para viewBox. Esto desactiva el cuadro de vista (y sí, esto es semánticamente correcto). Probablemente notará que el tamaño de su imagen salta de forma inmediata cuando hace esto, y eso es porque el svg ya no tiene una base (viewBox) para escalar la imagen. Por lo tanto, creamos esa referencia directamente, al establecer el ancho y el alto en la cantidad real de píxeles que desea que tenga su imagen en el editor XML de su editor SVG.

Al establecer el ancho y el alto de la imagen svg en el editor XML, crea una línea base para escalar la imagen, y este tamaño se convierte en un valor de 1 para las propiedades de la escala del marcador de forma predeterminada. Puede ver la ventaja que esto tiene para la escala dinámica del marcador.

Ahora que tiene su imagen medida, mueva la imagen hasta que la parte de la imagen que desea tener como anclaje esté sobre las coordenadas 0,0 del editor svg. Una vez hecho esto, copie el valor del atributo d de la ruta svg. Notará que aproximadamente la mitad de los números son negativos, que es el resultado de alinear su punto de anclaje para el 0,0 de la imagen en lugar de viewBox.

El uso de esta técnica le permitirá rotar el marcador correctamente, alrededor del punto lat y lng en el mapa. Esta es la única forma confiable de enlazar el punto en el marcador svg que desea con el lat y el largo de la ubicación del marcador.

Traté de hacer un JSFiddle para esto , pero hay algunos errores en la implementación, una de las razones por las que no me gusta el código reinterpretado. Por lo tanto, en su lugar, he incluido un ejemplo completamente autónomo a continuación que puede probar, adaptar y usar como referencia. Este es el mismo código que probé en JSFiddle que falló, pero navega a través de Firebug sin un quejido.

  < !DOCTYPE html>      Create Draggable and Rotatable SVG Marker      
Enter heading to rotate marker     Heading°     Drag marker to place marker

Esto es exactamente lo que hace Google por sus propios símbolos disponibles en la clase SYMBOL de la API de Maps, así que si eso no te convence … De todos modos, espero que esto te ayude a crear y configurar correctamente un marcador SVG para tus palabras de Google Maps son buenas.

Sí, puedes usar un archivo .svg para el ícono como lo haces con .png u otro formato de archivo de imagen. Simplemente configure la url del icono en el directorio donde se encuentra el archivo .svg. Por ejemplo:

 var icon = { url: 'path/to/images/car.svg', size: new google.maps.Size(sizeX, sizeY), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(sizeX/2, sizeY/2) }; var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); 

Las cosas van mejor, ahora mismo puedes usar archivos SVG.

  marker = new google.maps.Marker({ position: {lat: 36.720426, lng: -4.412573}, map: map, draggable: true, icon: "img/tree.svg" }); 

Como lo mencionaron otros en este hilo, no te olvides de establecer explícitamente los atributos de ancho y alto en svg de esta manera:

  

si no lo haces, ninguna manipulación de js puede ayudarte, ya que los mapas por página no tendrán un marco de referencia y siempre usarán un tamaño estándar.

(Sé que se ha mencionado en algunos comentarios, pero es fácil pasar por alto. Esta información me ayudó en varios casos)

¡DE ACUERDO! Lo hice pronto en mi web. Intento dos maneras de crear el marcador de google maps personalizado, este código de ejecución usa canvg.js y es la mejor compatibilidad para el navegador. El código comentado no es compatible con IE11 actualmente.

 var marker; var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = { latitude: 59.327, longitude: 18.067, color: "#" + "000", text: "ha" }; marker = createMarker(markerOption); marker.setMap(map); marker.addListener('click', changeColorAndText); }; function changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape has problem var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } }); return markerObj; }; function createSvgIcon(color, text) { var div = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + text + '' // + ''; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { size: new google.maps.Size(32, 43), url: imgSrc, scaledSize: new google.maps.Size(32, 43) }; return iconObj; };
 < !DOCTYPE html>    Your Custom Marker     

Debe pasar optimized: false .

P.ej

 var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) }; new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,}); 

Sin pasar optimized: false , mi svg apareció como una imagen estática.